.ds-case{--ds-cream:#f3eadb;--ds-dark:#1d1918;--ds-accent:#c97058;background:var(--ds-cream);color:var(--ds-dark);font-family:'Instrument Sans',sans-serif}
.ds-case *{box-sizing:border-box}.ds-case h2,.ds-case h3,.ds-case p{margin:0}.ds-case a{color:inherit}.ds-pad{padding:clamp(48px,7vw,112px) clamp(24px,6vw,100px)}
.ds-intro{background:#1d1918;color:#f3eadb;padding-top:32px;padding-bottom:42px}.ds-back{font-size:14px;text-decoration:none}.ds-title{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:35px 0 26px}.ds-title h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(64px,10vw,150px);line-height:1;letter-spacing:-.065em;margin:0;color:#c97058}.ds-title>span{font-size:13px;line-height:1.7;text-align:right}.ds-intro-bottom{display:flex;justify-content:space-between;align-items:end;gap:24px;border-top:1px solid #695048;padding-top:24px}.ds-intro-bottom p{font-size:clamp(22px,2.4vw,34px);line-height:1.2}.ds-live-link{display:inline-flex;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid #c97058;color:#f3eadb;text-decoration:none;font-size:13px;letter-spacing:.03em;transition:color .2s,border-color .2s}.ds-live-link span{color:#c97058;font-size:18px}.ds-live-link:hover{color:#c97058}.ds-status{display:flex;align-items:center;gap:8px;font-size:12px;color:#d7c5b9}.ds-status i{width:6px;height:6px;background:#c97058;border-radius:50%}
.ds-stage{position:relative;overflow:hidden;padding:0;background:#2a211e;color:#ead3c2;isolation:isolate}.ds-stage-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em}.ds-stage-word{position:absolute;bottom:17%;left:3%;white-space:nowrap;font-size:clamp(40px,12vw,190px);font-weight:600;letter-spacing:-.07em;color:#f1c9b214;z-index:-1}/* Classic aluminium iMac silhouette; the website retains its desktop viewport. */
.ds-monitor{width:min(100%,1030px);margin:55px auto 20px;filter:drop-shadow(0 28px 24px #150d0a55);position:relative}
.ds-monitor-bezel{position:relative;padding:2.5% 2.5% 0;border:1px solid #b8bdc1;border-radius:clamp(9px,1.8vw,22px);background:linear-gradient(135deg,#222426,#08090a 45%,#17191b);box-shadow:0 0 0 2px #8b9094,0 2px 2px #ffffff45 inset;overflow:hidden}
.ds-monitor-bezel::before{content:'';position:absolute;top:1.1%;left:50%;width:clamp(3px,.48vw,6px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 40% 35%,#34516a,#091018 60%);box-shadow:0 0 0 1px #36383b}
.ds-monitor-screen{background:#1d1918;border:1px solid #030405;border-radius:2px;overflow:hidden;position:relative}
.ds-monitor-screen iframe{pointer-events:none}
.ds-monitor-chin{height:clamp(30px,7vw,88px);margin:2.5% -2.64% 0;display:grid;place-items:center;background:linear-gradient(105deg,#dadde0 0%,#eceeef 32%,#c8cdd1 70%,#b8bec3 100%);border-top:1px solid #f1f2f3;box-shadow:0 -1px 0 #9ca2a7 inset}
.ds-monitor-chin svg{width:clamp(12px,2.4vw,29px);height:auto;fill:#272a2d;filter:drop-shadow(0 1px 0 #ffffff80)}
.ds-monitor-neck{position:relative;z-index:-1;width:19%;height:clamp(27px,6.2vw,80px);margin:-1px auto 0;background:linear-gradient(180deg,#747c82 0%,#c1c7cc 28%,#e0e4e7 86%,#aeb6bd 100%);clip-path:polygon(24% 0,76% 0,88% 100%,12% 100%)}
.ds-monitor-foot{position:relative;width:29%;height:clamp(8px,1.4vw,18px);margin:-2px auto 0;border-radius:40% 40% 15% 15% / 65% 65% 30% 30%;background:linear-gradient(#e3e7ea 0%,#b9c0c5 65%,#777f85 70%,#adb4ba 100%);box-shadow:0 9px 12px #160c0940}
.ds-stage-mockup{width:100%;height:100svh;min-height:560px;max-height:1100px;margin:0;overflow:hidden}.ds-stage-mockup img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;box-shadow:none}
.ds-label{display:block;font-size:11px;font-weight:500;letter-spacing:.13em;line-height:1.5;text-transform:uppercase}.ds-label>span{margin-right:12px;opacity:.5}.ds-case h2{font-family:'Instrument Sans',sans-serif;font-size:clamp(30px,4.1vw,62px);font-weight:500;line-height:1.06;letter-spacing:-.045em}.ds-case h3{font-size:21px;line-height:1.2;font-weight:500;letter-spacing:-.025em}.ds-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:45px}.ds-section-head h2{margin-top:20px}.ds-section-head>p{max-width:330px;font-size:15px;line-height:1.6;color:#6d5f58}.ds-overview{display:grid;grid-template-columns:1.15fr 1fr;gap:8%;background:#f8f2e9}.ds-overview h2{margin:24px 0}.ds-overview>div>p{max-width:510px;font-size:16px;line-height:1.7;color:#665a53}.ds-facts{display:grid;grid-template-columns:1fr 1fr;gap:23px;margin:40px 0 0}.ds-facts dt{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#79675e;margin-bottom:8px}.ds-facts dd{margin:0;font-size:13px;line-height:1.5}.ds-brief-cards{display:grid;gap:16px;align-content:center}.ds-brief-cards article{position:relative;padding:34px 30px 34px 145px;background:#e9ded2;border-radius:18px;overflow:hidden}.ds-card-num{position:absolute;left:18px;bottom:-12px;font-size:95px;letter-spacing:-.1em;color:#c3ada0}.ds-brief-cards h3{margin-bottom:12px}.ds-brief-cards p{position:relative;font-size:15px;line-height:1.6}.ds-brief-cards article+article{background:#c97058}.ds-brief-cards article+article .ds-card-num{color:#a15340}
.ds-identity{background:#e9ded2}.ds-identity-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ds-logo-board,.ds-stamp-board{border-radius:20px;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:40px;background:#211b19;color:#d6bdaa}.ds-logo-board>img{width:210px;height:190px;object-fit:contain}.ds-logo-board>span,.ds-stamp-board>span{font-size:9px;letter-spacing:.17em}.ds-stamp-board{background:#d8c0a8;color:#392c25}.ds-stamp-board>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,320px)}.ds-stamp-board img{width:90px;height:90px;object-fit:contain}
.ds-mockup-interlude{height:100svh;min-height:560px;max-height:1100px;overflow:hidden;background:#a95849}.ds-mockup-interlude img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.ds-system{background:#f3eadb}.ds-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.ds-swatches article{background:#fffaf3;border-radius:18px;padding:9px 9px 23px}.ds-swatches article>div{height:clamp(140px,19vw,290px);border-radius:11px;margin-bottom:20px}.ds-swatches h3{font-size:15px;padding:0 10px}.ds-swatches span{display:block;font-size:12px;padding:8px 10px}.ds-swatches p{font-size:12px;padding:0 10px;color:#77685e;line-height:1.5}.ds-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.ds-type-grid article{padding:30px;background:#fffaf3;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;min-height:300px}.ds-type-sample{font-size:clamp(32px,4.8vw,74px);letter-spacing:-.055em;line-height:1.03;padding:40px 0}.ds-bricolage{font-family:'Bricolage Grotesque',sans-serif;font-weight:700}.ds-type-footer{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#77685e}
.ds-principles{background:#211b19;color:#f3eadb}.ds-principles .ds-section-head>p{color:#b8aaa0}.ds-principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.ds-principle-art{height:270px;border-radius:16px;background:#302320;margin-bottom:30px;overflow:hidden}.ds-message{display:flex;flex-direction:column;justify-content:center;padding:28px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(25px,2.6vw,40px);letter-spacing:-.05em;line-height:1.04}.ds-message strong{color:#c97058}.ds-camera{background:radial-gradient(#6a3a2d,#302320);display:grid;place-items:center}.ds-camera img{width:72%;height:72%;object-fit:contain}.ds-process{padding:24px;display:flex;flex-direction:column;justify-content:center;background:#e9ded2;color:#211b19}.ds-process>div{padding:16px 0;border-bottom:1px solid #bfaa97;font-size:15px}.ds-process b{color:#a74c39;margin-right:12px}.ds-principle-grid .ds-label{color:#c97058;margin-bottom:13px}.ds-principle-grid h3{margin-bottom:15px}.ds-principle-grid p{font-size:14px;line-height:1.7;color:#b8aaa0}
.ds-final{background:#e9ded2}.ds-final>header{text-align:center;margin-bottom:50px}.ds-final h2{margin:20px 0}.ds-final header p{color:#716259;font-size:15px;line-height:1.6}.ds-open{display:inline-flex;align-items:center;gap:25px;border-bottom:1px solid #927b6b;padding:12px 0;margin-top:18px;text-decoration:none;font-size:13px}.ds-browser-label{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;background:#d7c6b6;border-radius:22px 22px 0 0;font-size:10px;letter-spacing:.08em}.ds-browser-label>span:first-child{display:flex;gap:5px}.ds-browser-label i{width:7px;height:7px;background:#9a8473;border-radius:50%}.ds-browser-label a{text-decoration:none}.ds-website{position:relative;overflow:hidden;background:#1d1918;border-radius:0 0 22px 22px;box-shadow:0 25px 50px #40271720}.ds-website-mobile{display:none}.ds-case iframe{display:block;border:0;max-width:none;transform-origin:top left;position:absolute;top:0;left:0}.ds-website iframe{pointer-events:none}.ds-build-note{margin-top:20px!important;font-size:12px;color:#76655b;line-height:1.7;max-width:720px}.ds-close{background:#511515;color:#f3eadb}.ds-close p{font-size:clamp(28px,4vw,55px);line-height:1.15;letter-spacing:-.04em;margin:30px 0}.ds-close>span:last-child{font-size:12px;color:#d5aaa0}
@media(max-width:760px){.ds-title{align-items:start}.ds-title>span{font-size:10px;margin-top:8px}.ds-intro-bottom{align-items:start;flex-direction:column}.ds-overview{grid-template-columns:1fr;gap:35px}.ds-section-head{display:block}.ds-section-head>p{margin-top:22px}.ds-identity-grid{gap:12px}.ds-logo-board,.ds-stamp-board{min-height:230px;padding:20px 12px}.ds-logo-board>img{width:140px;height:130px}.ds-stamp-board>div{gap:2px}.ds-stamp-board img{width:100%;height:60px}.ds-stamp-board>span,.ds-logo-board>span{font-size:7px;text-align:center}.ds-swatches{grid-template-columns:repeat(2,1fr);gap:12px}.ds-type-grid{grid-template-columns:1fr}.ds-type-grid article{min-height:250px}.ds-type-sample{font-size:50px}.ds-principle-grid{grid-template-columns:1fr;gap:35px}.ds-principle-art{height:240px;margin-bottom:22px}.ds-message{font-size:43px}.ds-camera img{width:250px}.ds-final{padding-inline:14px}.ds-final>header{padding-inline:10px}.ds-browser-label{padding:13px 12px;border-radius:13px 13px 0 0;font-size:8px;letter-spacing:0}.ds-browser-label>span:first-child{display:none}.ds-website{display:none}.ds-website-mobile{display:block;width:100%;height:auto;border-radius:0 0 13px 13px;box-shadow:0 25px 50px #40271720}.ds-monitor{margin-top:35px}.ds-stage{padding:0}.ds-stage-top{font-size:7px}.ds-stage-caption{font-size:9px}.ds-brief-cards article{padding-left:100px}.ds-card-num{font-size:75px}.ds-facts{gap:20px}}
@media(prefers-reduced-motion:reduce){.ds-case *{scroll-behavior:auto!important}}

/* Let the complete mockups fit smaller screens without crops or letterboxing. */
@media(max-width:1000px){
  .ds-stage-mockup,.ds-mockup-interlude{height:auto;min-height:0;max-height:none}
  .ds-stage-mockup img,.ds-mockup-interlude img{height:auto;width:100%}
}
@media(max-width:760px){
  .ds-stamp-board>span,.ds-logo-board>span{font-size:10px;letter-spacing:.08em}
  .ds-facts dt,.ds-type-footer,.ds-label{font-size:12px}
}

/* Render the real responsive Dopamix homepage at the phone breakpoint. */
.ds-website-mobile{position:relative;overflow:hidden;background:#1d1918}
.ds-website-mobile iframe{display:block;position:static;width:100%;height:5200px;border:0;transform:none;pointer-events:none}
.ds-live-link .minimal-arrow{width:28px;height:28px;color:currentColor}
@media(max-width:760px){.ds-website-mobile{height:5200px}}