*{box-sizing:border-box;margin:0}
:root{--paper:#F6F3EE;--ink:#111827;--o:#FF6B35;--g:#10B981;--p:#EC4899}
html,body{height:100%}
.landing{position:relative;height:100%;container-type:size;font-family:'DM Sans',system-ui,sans-serif;background:var(--paper);color:var(--ink);overflow:hidden;-webkit-tap-highlight-color:transparent}
.grain{position:absolute;inset:0;pointer-events:none;z-index:50;opacity:.06;background:url(../img/grain.svg)}
.wm{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;font:400 clamp(60px,15vw,190px)/.95 'Instrument Serif',serif;letter-spacing:-.02em;white-space:nowrap;color:#FFE8E0;user-select:none;pointer-events:none}
.wm div{display:flex;gap:.4em;width:max-content;animation:sl 40s linear infinite}.wm div:nth-child(even){animation-direction:reverse;color:#F1E4D8;font-style:italic}
@keyframes sl{to{transform:translateX(-50%)}}
.bgwm{position:absolute;inset:0;z-index:0}
.stage{position:relative;z-index:1;height:100%;display:grid;place-items:center;perspective:1600px}
.phone{position:relative;width:414px;height:860px;transform-style:preserve-3d;transform:scale(var(--k,1)) rotateY(var(--ry,-10deg)) rotateX(var(--rx,4deg));transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.body{position:absolute;inset:0;border-radius:64px;background:linear-gradient(145deg,#EFEAE2,#CFC8BD 55%,#E4DED5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset 0 0 0 5px #B9B1A5,0 60px 90px -30px rgba(80,40,10,.45),0 25px 40px -20px rgba(0,0,0,.35)}
.back{position:absolute;inset:6px 4px;border-radius:60px;background:#A89F92;transform:translateZ(-16px);box-shadow:0 40px 60px rgba(0,0,0,.25)}
.mid{position:absolute;inset:3px 2px;border-radius:62px;background:#C4BCB0;transform:translateZ(-8px)}
.btn{position:absolute;width:5px;border-radius:3px;background:#B3AB9F;transform:translateZ(-3px)}
.b1{left:-4px;top:150px;height:36px}.b2{left:-4px;top:210px;height:64px}.b3{left:-4px;top:290px;height:64px}.b4{right:-4px;top:240px;height:96px}
.bezel{position:absolute;inset:6px;border-radius:58px;background:#0b0b0d;transform:translateZ(3px)}
.screen{position:absolute;inset:14px;border-radius:50px;overflow:hidden;background:var(--paper);transform:translateZ(8px)}
.island{position:absolute;top:12px;left:50%;width:112px;height:32px;margin-left:-56px;border-radius:20px;background:#000;z-index:30}
.glare{position:absolute;inset:14px;border-radius:50px;pointer-events:none;z-index:40;transform:translateZ(12px);background:linear-gradient(115deg,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 32%)}
.app{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding-top:58px}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
header,footer{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;font:500 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;position:relative;z-index:2}
.brand{letter-spacing:.3em}
footer a{color:inherit;margin-left:16px}
main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:12px 18px}
.logo{width:61px;height:112px;flex:none;background:url(../img/logo.png) -52.8px -28px/168.7px 168.7px no-repeat}
.card{position:relative;width:100%;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);border-radius:28px;padding:22px;box-shadow:0 30px 70px -34px rgba(153,42,9,.4)}
.card h1{font:400 46px/1 'Instrument Serif',serif;margin:8px 0 4px}.card h1 em{font-style:italic;color:#CC4A1F}
.card>p{color:#6B7280;font-size:15px;line-height:1.45;margin-bottom:16px}
.row{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:var(--paper);border-radius:16px;padding:14px 16px;margin-bottom:8px;font:700 16px 'DM Sans';color:var(--ink);cursor:pointer;text-align:left;touch-action:manipulation;transition:transform .12s}
.row:active{transform:scale(.98)}.row:focus-visible{outline:3px solid #111827;outline-offset:2px}
.row small{font:500 11px 'DM Mono';letter-spacing:.1em;text-transform:uppercase;color:#9CA3AF;display:block;margin-top:2px}
.sw{width:42px;height:24px;border-radius:99px;background:#D1D5DB;position:relative;flex:none}.sw:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s}
.row[data-k=t] .sw{outline:2px solid var(--o)}.row[data-k=n] .sw{outline:2px solid var(--g)}.row[data-k=r] .sw{outline:2px solid var(--p)}
.row[aria-pressed=true] .sw:after{transform:translateX(18px)}.row[data-k=t][aria-pressed=true] .sw{background:var(--o)}.row[data-k=n][aria-pressed=true] .sw{background:var(--g)}.row[data-k=r][aria-pressed=true] .sw{background:var(--p)}.row[aria-pressed=true]{background:#fff;box-shadow:inset 0 0 0 1.5px #E5E7EB}
.msg{font:500 12px 'DM Mono';letter-spacing:.08em;text-transform:uppercase;color:#B33A14;min-height:18px;margin-top:8px;text-align:center}
.calm{position:absolute;inset:0;pointer-events:none;z-index:20}.calm span{position:absolute;font-size:34px;opacity:0;animation:calm 3.4s ease-in-out forwards}
@keyframes calm{0%{opacity:0;transform:translateY(12px)}35%,65%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@container (max-width:899px),(max-height:620px){
 .body,.back,.mid,.btn,.bezel,.glare,.island{display:none}
 .stage{display:block;perspective:none}.phone{width:100%;height:100%;transform:none!important;transition:none}
 .screen{inset:0;border-radius:0;transform:none;background:transparent}
 .app{padding-top:max(env(safe-area-inset-top),8px);padding-bottom:env(safe-area-inset-bottom)}
 main{padding:12px 16px}
}
@container (min-width:900px) and (min-height:621px){.screen .wm{font-size:120px}}
@media(prefers-reduced-motion:reduce){.wm div{animation:none}.phone{transition:none}}