/* Small additions; the original palette, typography and layout stay in style.css. */
.stage{aspect-ratio:840/580;transform:none;transition:none;border-radius:1rem;isolation:isolate}
.showcase-screens{position:absolute;inset:0}
.showcase-screens img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
#menuImageNext{opacity:0;pointer-events:none}
.tiltw{position:relative;min-width:0;perspective:none}
.exp .it{padding-block:.58rem}
.exp .it h3{display:flex;align-items:center;gap:.65rem;font-size:1.02rem}
.exp .it .ic{width:1.25rem;height:1.25rem}
.exp .it .d p{font-size:.83rem;line-height:1.5}
.exp .it.on .ic{color:var(--ac)}
.showcase-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;color:var(--mut);font-size:.72rem}
.showcase-footer>div{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
#menuCounter{font-variant-numeric:tabular-nums;font-size:.66rem;letter-spacing:.08em}
.showcase-arrow{border:0;background:transparent;cursor:pointer;padding:.35rem .5rem;font-size:1rem;color:var(--mut);border-radius:.4rem;transition:color .2s,background .2s}
.showcase-arrow:hover{color:var(--tx);background:var(--ac-soft)}
.showcase-progress{height:2px;background:var(--line);overflow:hidden;border-radius:2px}
.showcase-progress i{display:block;height:100%;background:var(--ac);transform-origin:left;transform:scaleX(.0769);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.it.on .ic{animation:icon-breathe .35s ease-out}
@keyframes icon-breathe{from{opacity:.4}to{opacity:1}}
.rng{overflow:hidden}
.compare-range{position:absolute;z-index:2;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y}
.rng:hover .cut,.rng:focus-within .cut,.rng.comparing .cut{opacity:1}
.cut::after{content:'‹ ›';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--ac-line);border-radius:50%;background:var(--s1);color:var(--tx);font:500 1rem Geist,system-ui;white-space:pre}
.rng.comparing{transition:none}
.rng:focus-within{outline:2px solid var(--ac);outline-offset:-2px}
nav a[aria-current=location],.fn a[aria-current=location]{color:var(--tx)}
input,textarea{-webkit-user-select:text;user-select:text}
.nav-auth-box{min-width:0}
.nav-user-chip{max-width:12rem;min-width:0}
.nav-user-chip>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#homeAuthModal{visibility:hidden;transition:opacity .25s,visibility .25s}
#homeAuthModal.open{visibility:visible}
.site-message{position:fixed;z-index:100000;left:50%;bottom:1.5rem;max-width:calc(100vw - 2rem);padding:.85rem 1.2rem;background:var(--s1);border:1px solid var(--ac-line);border-radius:.75rem;box-shadow:0 .75rem 2rem #0005;color:var(--tx);font-size:.85rem;opacity:0;transform:translate(-50%,.5rem);pointer-events:none;transition:opacity .25s,transform .25s}
.site-message.visible{opacity:1;transform:translate(-50%,0)}
.site-message[data-type=error]{border-color:#d976855c}
@media(max-width:860px){
  .exp{height:auto;padding:2.5rem 0 4rem}
  .stick{position:relative;top:auto;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:1.5rem;padding-top:0}
  .stick>div{width:100%;min-width:0}
  .exp h2{margin-bottom:.7rem}
  .exp .hint{font-size:.83rem;margin-bottom:1rem}
  .exp .list{flex-direction:row;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:.45rem;gap:.35rem;overscroll-behavior-x:contain}
  .exp .it{width:auto;flex-shrink:0;border:1px solid transparent;border-bottom:2px solid var(--line);border-radius:.5rem .5rem 0 0;padding:.6rem .7rem;scroll-snap-align:nearest}
  .exp .it.on{background:var(--ac-soft);border-bottom-color:var(--ac)}
  .exp .it h3{font-size:.8rem;white-space:nowrap;gap:.4rem}
  .exp .it .ic{width:1rem;height:1rem}
  .exp .it .d{display:none}
  .showcase-footer{font-size:.67rem;gap:.5rem;min-height:3rem}
  .showcase-footer>div{gap:.4rem}
  #menuCounter{font-size:.6rem}
  .stage{touch-action:pan-y}
}
@media(min-width:861px) and (max-height:760px){.exp h2{font-size:1.75rem}.exp .hint{font-size:.8rem;margin-bottom:.6rem}.exp .it{padding-block:.4rem}.exp .it h3{font-size:.9rem}}
@media(max-width:380px){
  .hero>div{min-width:0}
  h1{font-size:2rem}
  nav .logo{font-size:.95rem;gap:.4rem}
  nav .logo i{width:1.5rem}
  nav .btn{font-size:.75rem;padding-inline:.6rem}
  .nav-auth-box{gap:.45rem}
  .nav-user-chip{max-width:4.5rem;padding-inline:.4rem;gap:.3rem}
  .nav-user-avatar{display:none}
  .wt{padding-inline:.6rem;gap:.5rem}
  .vw{font-size:.6rem;min-width:0}
  .vw em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ck{font-size:.7rem;padding-inline:.5rem;gap:.4rem;flex-shrink:0}
  .cb{width:1rem;height:1rem}
}
@media(prefers-reduced-motion:reduce){.showcase-progress i,.showcase-arrow{transition:none}.it.on .ic{animation:none}}

/* Stable menu geometry and quieter, readable surfaces. */
html{scrollbar-gutter:stable;scroll-padding-top:5.5rem}
.hero-art{min-width:0;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.hero-art .lgbox{width:100%}
.hero-art .lg{width:min(100%,27rem)}
.atmosphere{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.45rem .7rem;border:1px solid #ffffff12;border-radius:3rem;background:#11111c66}
.atmosphere-label{font-size:.65rem;letter-spacing:.02em;color:var(--mut);margin-right:.35rem}
.atmosphere-swatch{position:relative;display:grid;place-items:center;width:2rem;height:2rem;flex:none;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;cursor:pointer;transition:background .2s,border-color .2s}
.atmosphere-swatch::before{content:'';width:.6rem;height:.6rem;border-radius:50%;background:var(--swatch);transition:box-shadow .25s,transform .25s}
.atmosphere-swatch[aria-pressed=true]{border-color:#ffffff30;background:#ffffff09}
.atmosphere-swatch[aria-pressed=true]::before{box-shadow:0 0 .65rem var(--swatch)}
.atmosphere-name{min-width:3.7rem;font-size:.65rem;color:var(--tx);padding-left:.3rem}
.exp .it{border-radius:0 .45rem .45rem 0;transition:color .18s,border-color .18s,background .18s}
.exp .it.on{background:linear-gradient(90deg,var(--ac-soft),transparent)}
.exp .it .d{display:none}
.menu-description{min-height:4.5em;margin:1.15rem 0 0;padding-left:1rem;border-left:2px solid var(--line);font-size:.8rem;line-height:1.5;color:var(--mut);max-width:22rem}
.stage{background:#0d0d16;box-shadow:0 1.25rem 3rem #0005,0 0 0 1px #ffffff0e;contain:layout paint}
.showcase-screens{isolation:isolate}
#menuImageNext{will-change:opacity}
.showcase-footer{min-height:3.5rem;font-size:.75rem}
.showcase-arrow{display:inline-flex;justify-content:center;align-items:center;min-width:2.5rem;min-height:2.5rem;border:1px solid var(--line);background:#11111c80}
.plan .nt{min-height:2.9em;max-width:15rem}
.plan .bd{font-size:.61rem;top:1.55rem;right:1.1rem;padding:.2rem .55rem}
.plan .pr{margin-top:1.2rem}
.rng .cut::after{font-size:.85rem;box-shadow:0 .25rem 1rem #0005}
footer a{transition:color .18s}
@media(hover:hover){
  .atmosphere-swatch:hover{background:#ffffff0c}
  .atmosphere-swatch:hover::before{transform:scale(1.2)}
  .exp .it:hover{background:linear-gradient(90deg,#ffffff06,transparent)}
}
@media(max-width:1100px) and (min-width:861px){
  .stick{grid-template-columns:minmax(15rem,.85fr) minmax(0,1.3fr);gap:2rem}
  .plan{padding:1.65rem 1.1rem}
  .plan .pf{font-size:.82rem}
  .plan .bd{top:.55rem;right:.7rem;font-size:.57rem}
}
@media(max-width:860px){
  .hero-art{order:-1;gap:.65rem;margin-bottom:.7rem}
  .hero-art .lg{width:min(70%,17.5rem)}
  .atmosphere{padding:.25rem .6rem}
  .atmosphere-label,.atmosphere-name{font-size:.6rem}
  .menu-description{min-height:3em;max-width:100%;margin:.7rem 0 0;font-size:.75rem;padding-left:.7rem}
  .exp .it{min-height:2.6rem;scroll-snap-align:center}
  .showcase-arrow{min-width:2.5rem;min-height:2.5rem}
  .plan .nt{min-height:0}
  .plan .bd{font-size:.67rem}
  .fn .logo{padding-inline:.5rem}
}
@media(max-width:380px){
  .hero .cta{gap:.6rem}
  .hero .cta .btn{padding-inline:.85rem;font-size:.8rem}
  .showcase-footer{font-size:.6rem}
  .showcase-footer>div{gap:.25rem}
}
@media(max-height:620px) and (min-width:861px){
  .stick{gap:2rem}
  .exp .it{padding-block:.22rem}
  .exp h2{font-size:1.5rem}
  .menu-description{margin-top:.6rem;font-size:.72rem;min-height:3em}
  .tiltw{width:min(100%,calc((100svh - 7rem)*1.4483));justify-self:center}
}
@media(prefers-reduced-motion:reduce){
  .atmosphere-swatch,.atmosphere-swatch::before,.exp .it{transition:none}
}