/* The studio and the fictional site deliberately use separate design tokens. */
.playground-page .studio-intro{padding-top:65px;padding-bottom:36px;background:radial-gradient(ellipse at 90% 20%,#b8f34b0c,transparent 55%)}
.studio-intro .eyebrow{color:var(--lime)}.studio-intro h1{font-size:clamp(45px,6.3vw,92px);line-height:1.02;letter-spacing:-.065em;margin:0 0 22px}.studio-intro h1>span{color:var(--orange)}.studio-intro>p:not(.eyebrow){max-width:760px;color:#c1c5ca;font-size:16px;line-height:1.8}.studio-intro .studio-pill{display:inline-flex;gap:8px;align-items:center;font-size:10px;color:var(--lime);letter-spacing:1px;border:1px solid #b8f34b44;padding:9px 12px;margin:8px 0 0}.studio-pill>span{height:6px;width:6px;background:var(--lime);border-radius:50%}
.studio-main{padding-top:0;padding-bottom:75px}.mission-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}.mission-tabs button{display:flex;gap:14px;align-items:flex-start;text-align:left;background:#191f26;color:var(--white);border:1px solid var(--line);padding:18px 20px;font:inherit;font-size:13px;line-height:1.45;min-height:76px}.mission-tabs button>span{font-size:10px;color:var(--orange);padding-top:2px}.mission-tabs button[aria-pressed=true]{border-color:var(--lime);background:#b8f34b0a}.mission-tabs button:hover{border-color:var(--lime)}.mission-brief{padding:23px 28px;border-left:3px solid var(--lime);background:#1b2426;margin:0 0 28px}.mission-brief h2{font-size:20px;letter-spacing:-.03em;margin:0 0 6px;line-height:1.4}.mission-brief p{font-size:13px;line-height:1.7;color:#c1c5ca;margin:0;max-width:950px}
.studio-workspace{display:grid;grid-template-columns:295px minmax(0,1fr);gap:25px;align-items:start}.studio-controls{background:#1a2027;border:1px solid var(--line);padding:23px}.studio-controls fieldset{border:0;border-bottom:1px solid var(--line);padding:0 0 21px;margin:0 0 22px;min-width:0}.studio-controls legend,.control-label{display:block;font-size:10px;letter-spacing:1.2px;font-weight:700;margin-bottom:14px;text-transform:uppercase;color:#c9cdd1}.style-buttons{display:grid;gap:7px}.style-buttons button{border:1px solid #ffffff24;background:none;color:var(--white);text-align:left;padding:12px;font:inherit;font-size:12px;line-height:1.4;min-height:44px}.style-buttons button>span{display:block;color:var(--muted);font-size:10px;margin-top:3px}.style-buttons button[aria-pressed=true]{border-color:var(--orange);box-shadow:3px 0 0 var(--orange) inset;background:#ff641a0a}.palette-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette-buttons button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px;background:none;border:1px solid #ffffff24;color:var(--white);font:inherit;font-size:9px;line-height:1.4;min-height:67px}.palette-buttons button[aria-pressed=true]{border-color:var(--lime)}.palette-swatches{display:flex;gap:3px}.palette-swatches i{display:block;width:20px;height:16px;border:1px solid #ffffff33;background:var(--swatch)}.studio-controls select{width:100%;background:#101319;color:var(--white);padding:12px;border:1px solid #ffffff33;font:inherit;font-size:12px;min-height:44px;border-radius:0}.studio-controls select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}.studio-controls label.control-label{margin-top:19px}.radius-label{display:flex;justify-content:space-between;align-items:center}.radius-label output{color:var(--lime);font-size:11px}.studio-controls input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--orange);cursor:pointer}.range-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin-top:3px}.motion-note{font-size:10px;color:var(--muted);line-height:1.7;margin:12px 0 0}.studio-controls .surprise-button{width:100%;justify-content:space-between;padding:15px 12px;font-size:12px;min-height:46px}.reset-design{display:block;background:none;border:0;border-bottom:1px solid #ffffff44;padding:0 0 4px;margin:18px auto 0;color:var(--muted);font:inherit;font-size:11px;min-height:28px}
.preview-column{min-width:0}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.device-buttons{display:flex;border:1px solid var(--line);padding:3px;gap:3px}.device-buttons button,.compare-design{font:inherit;font-size:11px;padding:10px 13px;border:0;color:var(--muted);background:none;min-height:39px}.device-buttons button[aria-pressed=true]{background:var(--white);color:var(--bg)}.compare-design{border:1px solid #ffffff33;color:var(--white)}.compare-design[aria-pressed=true]{border-color:var(--orange);color:var(--orange)}.preview-stage{position:relative;overflow:hidden;background:radial-gradient(circle at 30% 20%,#29333d,#11161b);border:1px solid #ffffff20;padding:clamp(12px,2vw,28px);min-height:620px;perspective:1400px}.preview-caption{display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:9px;letter-spacing:1.1px;margin:0 0 16px;line-height:1.5}.preview-caption>span:first-child{color:var(--lime)}.design-preview{--demo-bg:#f4f5f1;--demo-ink:#152326;--demo-accent:#17634f;--demo-button:#ffffff;--demo-card:#ffffff;--demo-glow:#dbe8de;--demo-radius:4px;--demo-font:"Space",Arial,sans-serif;color:var(--demo-ink);background:var(--demo-bg);border-radius:8px;box-shadow:0 24px 55px #0005;margin:0 auto;max-width:100%;width:100%;overflow:hidden;transform:perspective(1200px) rotateX(var(--demo-rx,0deg)) rotateY(var(--demo-ry,0deg));transform-origin:50% 40%;font-family:var(--demo-font)}.design-preview[data-motion=sanft],.design-preview[data-motion=raum]{transition:background .3s,color .3s,transform .2s}.design-preview[data-motion=sanft] .demo-button,.design-preview[data-motion=sanft] .demo-feature,.design-preview[data-motion=raum] .demo-button,.design-preview[data-motion=raum] .demo-feature{transition:background .3s,border-radius .3s,transform .2s}.demo-browser{display:flex;gap:5px;align-items:center;padding:11px 15px;border-bottom:1px solid currentColor;background:#00000006}.demo-browser i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35}.demo-browser>span{font-family:Arial,sans-serif;font-size:8px;letter-spacing:1px;margin:0 auto;opacity:.75}.demo-content{padding:clamp(20px,3vw,42px)}.demo-masthead{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:35px}.demo-brand{font-weight:700;font-size:24px;line-height:1;letter-spacing:-.06em}.demo-masthead>span:last-child{font-size:8px;letter-spacing:1px;border-bottom:1px solid currentColor;padding-bottom:4px}.demo-hero{display:grid;grid-template-columns:minmax(0,1fr) 30%;gap:22px;align-items:center}.demo-tag{font-family:Arial,sans-serif;font-size:8px;font-weight:700;letter-spacing:1.5px;line-height:1.6;margin:0 0 17px}.demo-title{font-family:var(--demo-font);font-size:clamp(30px,3.2vw,49px);font-weight:700;line-height:1.05;letter-spacing:-.05em;white-space:pre-line;margin:0 0 20px;overflow-wrap:normal}.demo-copy{font-family:var(--demo-font);font-size:12px;line-height:1.8;margin:0 0 22px;max-width:400px}.demo-button{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:13px 18px;background:var(--demo-accent);color:var(--demo-button);font:700 11px var(--demo-font);line-height:1.5;border:0;border-radius:var(--demo-radius);box-shadow:0 7px 20px #0000000b}.demo-button:focus-visible{outline:2px solid var(--demo-ink);outline-offset:4px}.demo-art{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:var(--demo-glow);color:var(--demo-accent);isolation:isolate}.demo-art::before{content:"";position:absolute;inset:-10px;border:1px solid currentColor;border-radius:50%;opacity:.3;transform:rotate(-15deg) scaleY(.9);z-index:-1}.demo-art svg{width:75%;height:auto;display:block}.demo-art .startup-mark{display:none}.design-preview[data-scenario=startup] .demo-art .startup-mark{display:block}.design-preview[data-scenario=startup] .demo-art .coffee-mark{display:none}.demo-orbit{position:absolute;right:0;top:10%;width:16px;height:16px;background:var(--demo-accent);border:3px solid var(--demo-bg);border-radius:50%}.demo-detail{font-family:Arial,sans-serif;font-size:8px;letter-spacing:1.3px;margin:33px 0 15px;padding-top:20px;border-top:1px solid currentColor;line-height:1.6}.demo-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.demo-feature{background:var(--demo-card);padding:15px 11px;border:1px solid #77777722;border-radius:var(--demo-radius)}.demo-feature>span{display:block;font-size:10px;margin-bottom:10px;color:var(--demo-accent)}.demo-feature strong{font-family:var(--demo-font);display:block;font-size:12px;line-height:1.4;letter-spacing:-.025em}.demo-footer{font-family:Arial,sans-serif;font-size:8px;margin:22px 0 0;opacity:.75;line-height:1.6}.demo-action-note{font-size:11px;line-height:1.7;border-left:2px solid var(--demo-accent);padding-left:10px;margin:18px 0 0;max-width:450px}.design-preview[data-device=mobile]{width:360px}.design-preview[data-device=mobile] .demo-content{padding:24px}.design-preview[data-device=mobile] .demo-masthead{margin-bottom:30px}.design-preview[data-device=mobile] .demo-hero{grid-template-columns:1fr}.design-preview[data-device=mobile] .demo-title{font-size:35px}.design-preview[data-device=mobile] .demo-art{width:135px;justify-self:center;margin:10px 0 5px}.design-preview[data-device=mobile] .demo-features{grid-template-columns:1fr}.design-preview[data-device=mobile] .demo-feature{padding:13px;display:flex;gap:15px;align-items:center}.design-preview[data-device=mobile] .demo-feature>span{margin:0}.design-preview[data-device=mobile] .demo-copy{font-size:13px}
.studio-progress{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.studio-progress>div:first-child>strong{font-size:12px;color:var(--lime)}.studio-progress p{color:var(--muted);font-size:11px;line-height:1.7;max-width:420px;margin:7px 0 0}.tried-list{display:flex;gap:7px;flex-wrap:wrap;align-content:start;list-style:none;padding:0;margin:0}.tried-list li{display:flex;align-items:center;gap:6px;border:1px solid #ffffff22;padding:6px 9px;font-size:10px;color:var(--muted)}.tried-list li.is-done{color:var(--lime);border-color:#b8f34b55}.studio-status{font-size:12px;line-height:1.7;min-height:42px;color:#c1c5ca;margin:17px 0 0}.studio-footer-note{font-size:11px;color:var(--muted);line-height:1.7;margin-top:18px}.studio-outro{border-top:1px solid var(--line);background:#191f26}.studio-outro-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center}.studio-outro h2{font-size:clamp(34px,4vw,56px);line-height:1.08;letter-spacing:-.05em;margin:0}.studio-outro p{font-size:15px;color:#c1c5ca;line-height:1.8}.studio-outro .button{margin-top:15px}.studio-noscript{padding:28px;border:1px solid var(--line);line-height:1.8}
@media(hover:hover) and (pointer:fine){.design-preview[data-motion=raum] .demo-feature:hover{transform:translateY(-4px)}.design-preview[data-motion=raum] .demo-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px #0002}}
@media(max-width:1100px){.studio-workspace{grid-template-columns:260px minmax(0,1fr);gap:18px}.studio-controls{padding:18px}.demo-hero{grid-template-columns:1fr}.demo-art{display:none}.demo-title{font-size:35px}.demo-content{padding:25px}.demo-feature{padding:12px 9px}.demo-feature strong{font-size:11px}.studio-progress{flex-direction:column;gap:13px}.mission-tabs button{font-size:11px;padding:16px 13px}.design-preview[data-device=mobile] .demo-art{display:grid}}
@media(max-width:800px){.studio-workspace{grid-template-columns:1fr}.studio-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px}.studio-controls fieldset{margin:0;padding:0 0 18px}.studio-controls .style-fieldset{grid-row:span 2}.studio-controls .type-fieldset{grid-column:2}.studio-controls .motion-fieldset{grid-column:1}.studio-controls .studio-control-actions{grid-column:2;align-self:center}.preview-stage{min-height:0}.demo-hero{grid-template-columns:minmax(0,1fr) 27%}.demo-art{display:grid}.demo-title{font-size:clamp(28px,5.5vw,43px)}.studio-outro-grid{grid-template-columns:1fr;gap:20px}.studio-intro>p:not(.eyebrow){font-size:15px}.studio-progress{flex-direction:row}.mission-tabs{gap:8px}.mission-tabs button{min-height:90px;gap:7px;flex-direction:column}.mission-brief{padding:20px}.mission-brief h2{font-size:18px}}
@media(max-width:500px){.playground-page .studio-intro{padding-top:42px;padding-bottom:25px}.studio-intro h1{font-size:43px}.studio-main{padding-bottom:45px}.mission-tabs{grid-template-columns:1fr;gap:7px}.mission-tabs button{min-height:44px;padding:12px;flex-direction:row;align-items:center;font-size:12px}.studio-controls{gap:14px;padding:16px}.studio-controls legend,.control-label{font-size:9px;letter-spacing:.8px}.style-buttons button{padding:10px;font-size:11px}.palette-buttons{gap:5px}.palette-buttons button{padding:7px;font-size:8px}.palette-swatches i{width:13px;height:13px}.studio-controls .surprise-button{font-size:10px;gap:6px;padding:12px 8px}.motion-note{font-size:9px}.preview-stage{padding:12px}.preview-caption{font-size:8px;letter-spacing:.6px}.demo-content{padding:22px}.demo-hero{grid-template-columns:1fr}.demo-title{font-size:35px}.demo-art{width:125px;justify-self:center;margin-top:10px}.demo-features{grid-template-columns:1fr}.demo-feature{display:flex;gap:12px;align-items:center;padding:12px}.demo-feature>span{margin:0}.demo-feature strong{font-size:12px}.demo-copy{font-size:13px}.demo-brand{font-size:25px}.studio-progress{flex-direction:column}.device-buttons button,.compare-design{font-size:10px;padding:9px}.preview-toolbar{gap:8px}.design-preview[data-device=mobile]{width:280px}.design-preview[data-device=mobile] .demo-content{padding:21px}}
@media(prefers-reduced-motion:reduce){.design-preview,.design-preview *{transition:none!important;animation:none!important;transform:none!important}}
@media print{.studio-controls,.mission-tabs,.preview-toolbar{display:none!important}.studio-workspace{display:block}.design-preview{transform:none!important;box-shadow:none}.preview-stage{padding:0}}

/* Five distinct structures; color and typography remain independently editable. */
.industry-picker{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:26px}.industry-picker>.eyebrow{margin-bottom:15px;color:var(--lime)}.industry-buttons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.industry-buttons button{display:flex;flex-direction:column;gap:10px;text-align:left;min-height:89px;padding:18px;background:#1a2027;border:1px solid var(--line);color:var(--white);font:inherit}.industry-buttons button>span{font-size:8px;letter-spacing:1.3px;color:var(--muted)}.industry-buttons button>strong{font-size:12px;line-height:1.5}.industry-buttons button[aria-pressed=true]{border-color:var(--orange);background:#ff641a0d;box-shadow:0 -3px 0 var(--orange) inset}.industry-caption{font-size:12px;color:var(--muted);line-height:1.7;margin:18px 0 5px}.industry-layout{font-size:12px;line-height:1.7;color:var(--lime);margin:0}.motion-replay{border:1px solid #b8f34b66;background:#b8f34b0a;color:var(--lime);font:inherit;font-size:11px;padding:10px 13px;min-height:39px}.motion-replay:hover{background:#b8f34b20}.palette-buttons{max-height:248px;overflow-y:auto;padding:2px;scrollbar-color:var(--orange) #101319;scrollbar-width:thin}.radius-label .control-label{margin:20px 0 10px}.radius-label output{margin-top:10px}.demo-art .trade-mark,.demo-art .consulting-mark,.demo-art .studio-mark{display:none}.design-preview[data-template=handwerk] .coffee-mark,.design-preview[data-template=beratung] .coffee-mark,.design-preview[data-template=studio] .coffee-mark{display:none}.design-preview[data-template=handwerk] .trade-mark,.design-preview[data-template=beratung] .consulting-mark,.design-preview[data-template=studio] .studio-mark{display:block}
.design-preview[data-template=handwerk] .demo-masthead{border-bottom:6px solid var(--demo-accent);padding-bottom:22px;margin-bottom:26px}.design-preview[data-template=handwerk] .demo-hero{grid-template-columns:minmax(0,1fr) 34%}.design-preview[data-template=handwerk] .demo-art{border-radius:0;background:var(--demo-card);border:1px solid var(--demo-accent);background-image:linear-gradient(#7772 1px,transparent 1px),linear-gradient(90deg,#7772 1px,transparent 1px);background-size:18px 18px}.design-preview[data-template=handwerk] .demo-art::before{display:none}.design-preview[data-template=handwerk] .demo-features{gap:0;border-block:1px solid var(--demo-accent)}.design-preview[data-template=handwerk] .demo-feature{border:0;border-right:1px solid var(--demo-accent);padding:22px 12px;border-radius:0}.design-preview[data-template=handwerk] .demo-feature:last-child{border-right:0}.design-preview[data-template=handwerk] .demo-title{text-transform:uppercase;font-size:clamp(29px,3vw,43px);letter-spacing:-.055em}
.design-preview[data-template=beratung] .demo-hero{display:flex;flex-direction:column-reverse;text-align:center;gap:22px}.design-preview[data-template=beratung] .demo-hero>div:first-child{max-width:540px}.design-preview[data-template=beratung] .demo-copy{margin-left:auto;margin-right:auto}.design-preview[data-template=beratung] .demo-art{width:90px;aspect-ratio:1}.design-preview[data-template=beratung] .demo-masthead{justify-content:center;flex-direction:column;gap:12px}.design-preview[data-template=beratung] .demo-title{font-weight:400;letter-spacing:-.045em}.design-preview[data-template=beratung] .demo-features{grid-template-columns:1fr}.design-preview[data-template=beratung] .demo-feature{display:flex;gap:15px;align-items:center;padding:17px;background:none;border-width:0 0 1px;border-radius:0}.design-preview[data-template=beratung] .demo-feature>span{margin:0}.design-preview[data-template=beratung] .demo-detail{text-align:center;margin-top:30px}
.design-preview[data-template=studio] .demo-hero{grid-template-columns:minmax(0,1fr) 24%;gap:8px}.design-preview[data-template=studio] .demo-title{font-size:clamp(39px,4vw,66px);text-transform:uppercase;line-height:.95;letter-spacing:-.045em}.design-preview[data-template=studio] .demo-brand{text-transform:uppercase;font-size:15px;letter-spacing:2px}.design-preview[data-template=studio] .demo-art{border-radius:0;background:none;transform:rotate(-12deg)}.design-preview[data-template=studio] .demo-art::before{display:none}.design-preview[data-template=studio] .demo-features{grid-template-columns:1.5fr 1fr}.design-preview[data-template=studio] .demo-feature:first-child{grid-row:span 2;min-height:135px;display:flex;flex-direction:column;justify-content:space-between;background:var(--demo-accent);color:var(--demo-button)}.design-preview[data-template=studio] .demo-feature:first-child>span{color:var(--demo-button);font-size:24px}.design-preview[data-template=studio] .demo-feature strong{font-size:15px}
.design-preview[data-template=startup] .demo-masthead{background:var(--demo-card);border:1px solid #7774;padding:14px;border-radius:var(--demo-radius);margin-bottom:26px}.design-preview[data-template=startup] .demo-hero{grid-template-columns:minmax(0,1fr) 32%}.design-preview[data-template=startup] .demo-art{border-radius:var(--demo-radius);background:var(--demo-card);border:1px solid var(--demo-accent);aspect-ratio:.78;box-shadow:9px 9px 0 var(--demo-glow)}.design-preview[data-template=startup] .demo-art svg{width:65%}.design-preview[data-template=startup] .demo-art::before{inset:13px;border-radius:0;transform:none;border-width:0 0 5px;opacity:1}.design-preview[data-template=startup] .demo-orbit{top:10px;right:10px;width:10px;height:10px;border:0}.design-preview[data-template=startup] .demo-detail{border-top:0;background:var(--demo-card);padding:12px;border-left:3px solid var(--demo-accent)}.design-preview[data-template=startup] .demo-feature{border-top:3px solid var(--demo-accent)}
@media(min-width:801px){.preview-column{position:sticky;top:112px}.preview-stage{min-height:570px}}
@media(max-width:1100px){.design-preview .demo-art{display:grid}.industry-buttons{gap:7px}.industry-buttons button{padding:13px}.industry-buttons button>strong{font-size:11px}.design-preview[data-template=handwerk] .demo-hero,.design-preview[data-template=studio] .demo-hero,.design-preview[data-template=startup] .demo-hero{grid-template-columns:1fr}.design-preview .demo-art{width:125px;justify-self:center}.design-preview[data-template=studio] .demo-title{font-size:40px}.design-preview[data-template=startup] .demo-art{aspect-ratio:1.1;width:180px}}
.design-preview[data-device=mobile] .demo-hero{grid-template-columns:1fr}.design-preview[data-device=mobile][data-template=studio] .demo-title{font-size:43px}.design-preview[data-device=mobile][data-template=handwerk] .demo-features{border:0}.design-preview[data-device=mobile][data-template=handwerk] .demo-feature{border-right:0;border-bottom:1px solid var(--demo-accent)}.design-preview[data-device=mobile][data-template=studio] .demo-features{grid-template-columns:1.3fr 1fr}.design-preview[data-device=mobile][data-template=studio] .demo-feature{display:block}.design-preview[data-device=mobile][data-template=beratung] .demo-art{width:90px}
@media(max-width:800px){.industry-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}.industry-buttons button{min-height:77px}.design-preview[data-template=handwerk] .demo-hero,.design-preview[data-template=startup] .demo-hero{grid-template-columns:minmax(0,1fr) 30%}.design-preview .demo-art{width:100%}.palette-buttons{max-height:229px}}
@media(max-width:500px){.industry-buttons{grid-template-columns:1fr 1fr}.industry-buttons button:last-child{grid-column:1/-1;min-height:65px}.industry-buttons button{gap:5px;min-height:69px;padding:12px}.industry-buttons button>strong{font-size:12px}.industry-buttons button>span{font-size:7px}.design-preview[data-template=handwerk] .demo-hero,.design-preview[data-template=startup] .demo-hero{grid-template-columns:1fr}.design-preview .demo-art{width:120px}.design-preview[data-template=startup] .demo-art{width:150px}.design-preview[data-template=studio] .demo-feature:first-child{display:flex}.motion-replay{font-size:10px;padding:9px}.preview-toolbar{justify-content:flex-start}.industry-layout{font-size:11px}.design-preview[data-template=handwerk] .demo-features{border:0;grid-template-columns:1fr}.design-preview[data-template=handwerk] .demo-feature{border-right:0;border-bottom:1px solid var(--demo-accent);padding:14px}}

.font-note{font-size:9px;color:var(--muted);line-height:1.6;margin:9px 0 0}