#studio{background:var(--deep);border-block:1px solid var(--line);position:relative}
#studio .studio-layout{display:grid;grid-template-columns:330px 1fr;gap:30px;align-items:start}
#studio .studio-controls{border:1px solid var(--line);padding:24px;border-radius:12px;background:#0a2e39}
#studio .panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:23px}
#studio .step-label{font-size:.57rem;letter-spacing:.1em;font-weight:700}
#studio .tag{font-size:.45rem;color:var(--teal);padding:4px 6px;border:1px solid #4e776d;border-radius:3px;white-space:nowrap}
#studio label,#studio legend{font-size:.76rem;display:block;margin-bottom:8px;color:#e0eae7}
#studio input,#studio select,#studio textarea{width:100%;background:#052530;border:1px solid #54727b;color:var(--ink);border-radius:5px;padding:11px 12px;font-size:.83rem;margin-bottom:22px;min-height:46px}
#studio input::placeholder,#studio textarea::placeholder{color:#a4babc;opacity:1}
#studio textarea{resize:vertical}
#studio fieldset{padding:0;border:0;min-width:0;margin:0 0 23px}
#studio legend{padding:0;margin-bottom:9px}
#studio .style-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
#studio .style-options label{margin:0;position:relative}
#studio .style-options input,#studio .swatches input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0}
#studio .style-options label>span{display:block;padding:10px 4px;border:1px solid #59747a;border-radius:4px;text-align:center;font-size:.75rem}
#studio .style-options input:checked+span{border-color:var(--teal);color:var(--teal);background:#35e2ca13}
#studio .style-options input:focus-visible+span,#studio .swatches input:focus-visible+span{outline:3px solid #f4bd6c;outline-offset:4px}
#studio .swatches{display:flex;gap:15px;justify-content:space-between}
#studio .swatches label{margin:0;text-align:center;cursor:pointer;font-size:.65rem}
#studio .swatches label>span:before{content:'';display:block;width:36px;height:36px;background:var(--swatch);border-radius:50%;margin:3px auto 7px;border:2px solid #b7cecb}
#studio .swatches input:checked+span:before{outline:2px solid var(--teal);outline-offset:3px}
#studio .reset-link{border:0;border-bottom:1px solid #70918f;background:none;padding:0;font-size:.72rem;color:#b4cfcb}
#studio .studio-controls .fine{font-size:.67rem}
#studio .preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.61rem;letter-spacing:.08em;margin-bottom:13px}
#studio .device-switch{border:1px solid var(--line);border-radius:6px;padding:3px;display:flex}
#studio .device-switch button{font-size:.63rem;border:0;background:none;padding:6px 11px;border-radius:3px;color:#aac5c6}
#studio .device-switch button[aria-pressed=true]{background:#244650;color:#fff}
#studio .preview-stage{border:1px solid var(--line);border-radius:12px;background:repeating-linear-gradient(0deg,transparent,transparent 23px,#28404a33 24px),repeating-linear-gradient(90deg,#092733,#092733 23px,#28404a33 24px);padding:27px;display:flex;justify-content:center;min-height:435px;align-items:center;overflow:hidden}
#studio .concept,.original-concept-host .concept{color:#17362d;background:#f5f4ee;width:100%;max-width:760px;border-radius:6px;box-shadow:0 12px 24px #0003;overflow:hidden;transition:max-width .35s,border-radius .35s;--accent:#067568;--accent-light:#e1f3eb;color-scheme:light;container-type:inline-size}
#studio .concept-header,.original-concept-host .concept-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border-bottom:1px solid #14382d20;font-size:10px}
#studio .concept-header strong,.original-concept-host .concept-header strong{font-size:13px;max-width:66%;overflow-wrap:anywhere;line-height:1.4}
#studio .concept-header strong span,.original-concept-host .concept-header strong span{color:var(--accent)}
#studio .concept-header>span,.original-concept-host .concept-header>span{font-size:7px;white-space:nowrap}
#studio .concept-body,.original-concept-host .concept-body{display:grid;grid-template-columns:1.1fr 1fr;gap:15px;padding:40px 24px 36px}
#studio .concept-kicker,.original-concept-host .concept-kicker{font-size:7px;font-weight:700;letter-spacing:.16em;color:var(--accent);margin-bottom:14px}
#studio .concept-copy h3,.original-concept-host .concept-copy h3{font-size:clamp(25px,4.9cqw,44px);font-weight:600;line-height:1.04;letter-spacing:-.055em}
#studio .concept-copy>p:not(.concept-kicker),.original-concept-host .concept-copy>p:not(.concept-kicker){font-size:10px;margin-top:17px;max-width:230px;line-height:1.6}
#studio .concept-copy>button,.original-concept-host .concept-copy>button{font-size:9px;background:var(--accent);border:0;color:#fff;border-radius:3px;padding:10px 13px;margin-top:2px;max-width:100%;overflow-wrap:anywhere}
#studio .concept-visual,.original-concept-host .concept-visual{position:relative;min-height:180px;background:var(--accent-light);display:flex;align-items:center;justify-content:center;border-radius:100px 100px 7px 7px;isolation:isolate;overflow:hidden}
#studio .shape,.original-concept-host .shape{position:absolute;background:var(--accent);border-radius:50%}
#studio .shape-a,.original-concept-host .shape-a{width:80%;aspect-ratio:1;transform:translate(-10%,20%);opacity:.9}
#studio .shape-b,.original-concept-host .shape-b{width:60%;aspect-ratio:1;transform:translate(40%,5%);border:25px solid #f8f4e990;background:transparent}
#studio .visual-letter,.original-concept-host .visual-letter{font-size:90px;line-height:1;font-family:Georgia,serif;color:#fff;z-index:1;transform:rotate(-12deg)}
#studio .concept-visual>span,.original-concept-host .concept-visual>span{position:absolute;bottom:10px;color:#123b2e;font-size:6px;letter-spacing:.15em;font-weight:700;background:#ffffffdc;padding:4px 8px;border-radius:2px}
#studio .concept-services,.original-concept-host .concept-services{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #14382d20;padding:13px 22px;gap:10px;font-size:8px;font-weight:600}
#studio .concept-services>span,.original-concept-host .concept-services>span{overflow-wrap:anywhere}
#studio .concept-services>span:before,.original-concept-host .concept-services>span:before{content:'✦';color:var(--accent);margin-right:6px}
#studio .concept-footer,.original-concept-host .concept-footer{padding:12px 24px;font-size:7px;display:flex;justify-content:space-between;gap:15px}
#studio .concept.bold,.original-concept-host .concept.bold{background:#f7efd9;color:#172220;border-radius:0}
#studio .concept.bold h3,.original-concept-host .concept.bold h3{font-family:Arial,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.07em}
#studio .concept.bold .concept-visual,.original-concept-host .concept.bold .concept-visual{border-radius:0;transform:rotate(3deg)}
#studio .concept.bold .shape-a,.original-concept-host .concept.bold .shape-a{border-radius:0;transform:translate(-10%,20%) rotate(-20deg)}
#studio .concept.elegant,.original-concept-host .concept.elegant{background:#f8f2ea;color:#3e302b}
#studio .concept.elegant h3,.original-concept-host .concept.elegant h3{font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em}
#studio .concept.elegant .concept-header strong,.original-concept-host .concept.elegant .concept-header strong{font-family:Georgia,serif}
#studio .concept.elegant .concept-visual,.original-concept-host .concept.elegant .concept-visual{border-radius:50% 50% 0 0}
#studio .concept.mobile,.original-concept-host .concept.mobile{max-width:280px}
#studio .concept.mobile .concept-header,.original-concept-host .concept.mobile .concept-header{padding:16px}
#studio .concept.mobile #concept-nav,.original-concept-host .concept.mobile #concept-nav{display:none}
#studio .concept.mobile .concept-body,.original-concept-host .concept.mobile .concept-body{display:flex;flex-direction:column;padding:23px 20px;gap:23px}
#studio .concept.mobile .concept-copy h3,.original-concept-host .concept.mobile .concept-copy h3{font-size:34px}
#studio .concept.mobile .concept-copy>p:not(.concept-kicker),.original-concept-host .concept.mobile .concept-copy>p:not(.concept-kicker){font-size:11px}
#studio .concept.mobile .concept-visual,.original-concept-host .concept.mobile .concept-visual{min-height:150px;max-height:150px}
#studio .concept.mobile .concept-services,.original-concept-host .concept.mobile .concept-services{font-size:8px;gap:8px;padding:12px 15px}
#studio .preview-caption{font-size:.65rem;color:#b6d4cd;margin-top:14px;margin-bottom:8px}
#studio .studio-preview>.fine{font-size:.7rem;margin-bottom:22px}
#studio .studio-actions{display:flex;gap:13px;align-items:center;flex-wrap:wrap}
#studio .studio-actions .button{font-size:.76rem;padding:12px 15px;gap:12px}
#studio .studio-actions .text-link{font-size:.7rem}
#studio #studio-feedback{margin:12px 0 0}
#studio{--deep:#062b37;--ink:#edf5f2;--line:#36565d;--teal:#68e6ce;--muted:#aec8c9;color:#edf5f2}#studio h2{color:#f2f8f5}#studio h2 em{color:#68e6ce}#studio .eyebrow{color:#68e6ce}#studio .studio-controls{display:block}#studio input,#studio select{font-size:16px}#studio .fine{color:#b6d4cd}#studio .studio-preview{min-width:0}#studio .section-head>div+div{max-width:370px}#studio .studio-actions .button{background:#68e6ce;border-color:#68e6ce;color:#052b36}#studio .studio-actions .outline{background:transparent;border-color:#a5c7c7;color:#edf5f2}#studio .text-link{color:#b6e8df}
.original-concept-host{width:100%;min-width:0}.original-concept-host .concept{--accent:#067568;--accent-light:#e1f3eb}.original-concept-host h3{color:inherit;margin-top:0;margin-bottom:0}.original-concept-host p{margin-top:0;margin-bottom:0}.original-concept-host button{font-family:inherit;line-height:1.5}.original-concept-host .concept.mobile .concept-nav{display:none}
#studio .studio-colour-teal,.original-concept-host .studio-colour-teal{--accent:#067568;--accent-light:#e1f3eb}#studio .studio-colour-blue,.original-concept-host .studio-colour-blue{--accent:#204bb1;--accent-light:#e6edf8}#studio .studio-colour-terracotta,.original-concept-host .studio-colour-terracotta{--accent:#975025;--accent-light:#f2e3d3}#studio .studio-colour-plum,.original-concept-host .studio-colour-plum{--accent:#7a3d8c;--accent-light:#f0e5f2}
#studio .swatch-teal{--swatch:#067568}#studio .swatch-blue{--swatch:#204bb1}#studio .swatch-terracotta{--swatch:#975025}#studio .swatch-plum{--swatch:#7a3d8c}
@media(max-width:1100px){#studio .studio-layout{grid-template-columns:290px 1fr;gap:22px}#studio .preview-stage{padding:15px}.original-concept-host .concept-body{padding:28px 18px}.original-concept-host .concept-header{padding:16px}.original-concept-host .concept-header>span{display:none}.original-concept-host .concept-copy h3{font-size:30px}}
@media(max-width:800px){#studio .studio-layout{grid-template-columns:240px 1fr;gap:18px}#studio .studio-controls{padding:16px}.original-concept-host .concept-body{grid-template-columns:1fr;gap:20px}.original-concept-host .concept-visual{min-height:130px;max-height:130px}}
@media(max-width:640px){#studio .studio-layout{grid-template-columns:1fr;gap:26px}#studio .studio-controls{padding:23px}#studio .preview-stage{padding:18px}#studio .style-options label>span{font-size:14px}#studio .preview-toolbar{font-size:10px}#studio .device-switch button{font-size:11px}#studio .studio-actions .button{font-size:13px}#studio .studio-actions .text-link{font-size:13px}.original-concept-host .concept-body{grid-template-columns:1fr 1fr;padding:28px 18px;gap:10px}.original-concept-host .concept-copy h3{font-size:29px}.original-concept-host .concept-copy>p:not(.concept-kicker){font-size:10px}.original-concept-host .concept-visual{min-height:160px;max-height:none}.original-concept-host .concept-copy>button{font-size:9px;padding:9px 10px}.original-concept-host .concept-services{padding:12px 15px;font-size:8px}#studio .studio-controls .fine{font-size:12px}#studio .studio-preview>.fine{font-size:12px}}
@media(max-width:370px){.original-concept-host .concept-body{grid-template-columns:1fr}.original-concept-host .concept-visual{min-height:130px;max-height:130px}#studio .studio-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.original-concept-host .concept{transition:none}}

.original-concept-host .concept{margin-inline:auto}

/* Supporting controls remain readable; the concept is an illustrative miniature. */
#studio .step-label{font-size:11px}#studio .tag{font-size:10px}
#studio .device-switch button{font-size:12px;min-height:32px}
#studio .reset-link{font-size:13px;min-height:32px;padding:5px 0}
#studio .preview-caption,#studio .studio-preview>.fine,#studio .studio-controls .fine{font-size:13px}
#studio .studio-actions .text-link{font-size:14px}
