/* NOKO touch hero. Existing product sections retain their own layout. */
[hidden]{display:none!important}
.hero--touch{grid-template-columns:1fr 1.15fr;gap:28px;min-height:710px;padding:30px 0 36px}
.hero--touch h1{font-size:clamp(30px,3.35vw,49px);line-height:1.65;letter-spacing:-.04em;white-space:nowrap}
.hero--touch h1 em{color:#548b7f}
.hero--touch .hero__lead{font-size:15px;line-height:2.1;margin-top:23px}
.hero--touch .trust-list{font-size:11px;gap:13px;flex-wrap:wrap}
.hero__mobile-details{display:none}
.noko-companion{min-width:0;width:100%;align-self:center}
/* Quiet speech near NOKO; reserve two lines so reactions do not shift the body. */
.noko-speech{width:fit-content;max-width:calc(100% - 24px);min-height:50px;margin:0 auto;padding:0 12px;display:flex;align-items:center;justify-content:center;color:#62796e;text-align:center}
.noko-speech p{margin:0;font-size:14px;font-weight:400;line-height:1.8;letter-spacing:.03em}
.noko-stage{position:relative;height:480px;width:100%;touch-action:pan-y;isolation:isolate}
.noko-halo{position:absolute;inset:5% 0 0;border-radius:50%;background:radial-gradient(ellipse,#ddede470 0%,#e9eee130 45%,transparent 72%);z-index:-1}
.noko-floor{position:absolute;width:47%;height:8%;left:26.5%;bottom:5.5%;background:radial-gradient(ellipse,#46684b22,#55705c08 45%,transparent 72%);filter:blur(6px)}
#canvas-slot{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1)}
#canvas-slot canvas{display:block;width:100%;height:100%}
.noko-stage[data-ready=true] #canvas-slot,.room-view #canvas-slot{opacity:1;transform:none}.noko-stage[data-ready=true]{cursor:pointer}
.noko-hint{min-height:24px;margin:14px 0 0;text-align:center;color:#567365;font-size:13px;line-height:1.8;letter-spacing:.04em}
.noko-ripple{position:absolute;width:40px;height:40px;margin:-20px;border:1px solid #77946d;border-radius:50%;opacity:0;pointer-events:none}.noko-ripple.play{animation:noko-ripple .65s ease-out}@keyframes noko-ripple{0%{opacity:.5;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}
.noko-stage:focus-visible{outline:3px solid #548b7f;outline-offset:4px;border-radius:32px}
.noko-scroll{display:flex;justify-content:center;gap:14px;font-size:12px;color:#62776a;margin:12px auto 65px;width:fit-content}
/* Progressive enhancement: content remains readable without JavaScript. */
.reveal{opacity:1;transform:none}.motion-reduced *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(min-width:1500px){.noko-stage{height:540px}}
@media(max-width:980px){.hero--touch{grid-template-columns:1fr;gap:15px;padding:28px 0 0;min-height:0}.hero--touch .hero__copy{text-align:center;max-width:none}.hero--touch h1{font-size:36px}.hero--touch .hero__actions,.hero--touch .trust-list{justify-content:center}.noko-companion{max-width:540px;justify-self:center}.noko-stage{height:390px}}
@media(max-width:680px){.hero--touch{padding-top:12px;gap:14px}.hero--touch .eyebrow{font-size:12px;margin-bottom:10px}.hero--touch h1{font-size:clamp(28px,8vw,36px);line-height:1.55;white-space:normal}.hero--touch .hero__lead{font-size:15px;line-height:1.85;margin:12px auto 0;max-width:330px}.hero--touch .hero__lead br{display:block}.hero--touch .hero__actions,.hero--touch .trust-list{display:none}.noko-stage{height:330px}.noko-speech{min-height:48px;padding:0 12px}.noko-speech p{font-size:13px}.noko-hint{font-size:14px;margin-top:9px}.noko-scroll{font-size:14px;margin:20px auto 48px}}
@media(max-width:350px){.noko-stage{height:295px}}
@media(max-width:680px){.hero__mobile-details{display:block;margin:12px 0 0;color:var(--ink-soft);font-size:12px;font-weight:500;line-height:1.8}}
.noko-hint[hidden]{display:block!important;visibility:hidden}

/* Only the prepared 3D canvas appears; there is no image-to-model swap. */
.noko-arrival{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;pointer-events:none}
.noko-arrival i{width:7px;height:7px;border-radius:50%;background:#80b4a5;opacity:0;animation:noko-wait 1.7s ease-in-out 1s infinite}
.noko-arrival i:nth-child(2){animation-delay:1.15s}.noko-arrival i:nth-child(3){animation-delay:1.3s}
@keyframes noko-wait{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.6;transform:translateY(-5px)}}
.noko-stage[data-ready=true] .noko-arrival{display:none}
.noko-load-error{font-size:13px;text-align:center;color:#617768}.noko-load-error button{font:inherit;border:0;background:transparent;color:#397563;text-decoration:underline;cursor:pointer;padding:8px}
.noko-stage{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pan-y pinch-zoom}
.noko-secret-progress{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;pointer-events:none;opacity:0;transition:opacity .2s}
.noko-secret-progress.is-holding{opacity:.8}.noko-secret-progress svg{width:100%;height:100%;transform:rotate(-90deg)}
.noko-secret-progress circle{fill:none;stroke:#739777;stroke-width:2;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:calc(276.46 * (1 - var(--hold,0)))}
.noko-secret-entry{display:block;margin:10px auto 0;padding:8px 13px;border:1px solid #adc9ac;border-radius:30px;color:#4d795d;background:#eff6e8;font:inherit;font-size:12px;cursor:pointer;animation:noko-discover .7s ease both}
@keyframes noko-discover{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.noko-room{position:fixed;inset:0;margin:auto;width:min(600px,calc(100% - 24px));height:min(760px,calc(100vh - 24px));height:min(760px,calc(100dvh - 24px));max-width:none;max-height:none;padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom));border:1px solid #dce7d3;border-radius:28px;color:#3a5845;background:#f6f8ee;box-shadow:0 24px 100px #16382430;overflow:hidden;overscroll-behavior:none}
.noko-room::backdrop{background:#183e325c;backdrop-filter:blur(8px)}
.noko-room[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;animation:noko-discover .35s ease both}
.room-header{display:flex;justify-content:space-between;gap:12px;align-items:center;min-width:0}.room-header h2{font-size:22px;font-weight:500;letter-spacing:.03em;margin:0;line-height:1.5}
.room-header button{display:grid;place-items:center;flex:none;width:44px;height:44px;background:transparent;border:1px solid #d2dfc9;border-radius:50%;color:#57774d;font:inherit;font-size:24px;line-height:1;cursor:pointer}
.room-view{position:relative;min-width:0;min-height:0;border-radius:22px;background:radial-gradient(ellipse at 50% 45%,#f0f5e9,#e6eddd);overflow:hidden;touch-action:none}
.room-view #canvas-slot{inset:0;width:100%;height:100%}
.room-footer{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
#room-description{font-size:12px;line-height:1.6;color:#71856a;text-align:center;margin:0}
.room-turns{display:flex;gap:12px;align-items:center;justify-content:center}
.room-turns button{height:44px;min-width:44px;padding:0 18px;border:1px solid #d4e0ca;border-radius:30px;background:#fcfdf7;color:#567b49;font:inherit;font-size:13px;cursor:pointer}
.room-turns button:not(#camera-home){width:44px;padding:0;font-size:24px;line-height:1}
.room-turns button:hover,.room-header button:hover{background:#e3edd9}
.noko-room button:focus-visible,.noko-secret-entry:focus-visible{outline:3px solid #82a87a;outline-offset:3px}html.noko-room-open,body.noko-room-open{overflow:hidden;overscroll-behavior:none}.noko-room-open .mobile-install{display:none!important}
@media(max-width:480px),(max-height:600px){.noko-room{width:min(600px,calc(100% - 16px));height:calc(100vh - 16px);height:calc(100dvh - 16px);padding:14px;padding-bottom:max(14px,env(safe-area-inset-bottom));border-radius:24px}.noko-room[open]{gap:10px}.room-header h2{font-size:20px}.room-view{border-radius:18px}.room-footer{gap:10px}}
@media(max-height:420px) and (min-width:560px){.noko-room{padding:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.noko-room[open]{gap:6px}.room-footer{flex-direction:row;justify-content:space-between;gap:12px}.room-turns{gap:8px}.room-turns button{padding:0 12px}#room-description{font-size:11px}.room-header h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){#canvas-slot{transform:none;transition:none}.noko-arrival i{animation:none;opacity:.3}.noko-room[open],.noko-secret-entry{animation:none}}

/* Four intentional touches leave one small clue, without changing the room. */
.noko-secret-glimmer{position:absolute;inset:0;pointer-events:none;opacity:0}
.noko-secret-glimmer i{position:absolute;width:9px;height:9px;border-radius:50%;background:#fffbdf;box-shadow:0 0 8px 4px #e0d18f66}
.noko-secret-glimmer i:nth-child(1){left:25%;top:42%}.noko-secret-glimmer i:nth-child(2){right:25%;top:23%}.noko-secret-glimmer i:nth-child(3){right:20%;top:60%}
.noko-secret-glimmer.is-glimmering{animation:noko-clue-fade 3.8s ease both}
.noko-secret-glimmer.is-glimmering i{animation:noko-clue-rise 3.8s ease both}
.noko-secret-glimmer.is-glimmering i:nth-child(2){animation-delay:.12s}.noko-secret-glimmer.is-glimmering i:nth-child(3){animation-delay:.25s}
@keyframes noko-clue-fade{0%,100%{opacity:0}20%,65%{opacity:1}}
@keyframes noko-clue-rise{from{transform:translateY(10px) scale(.6)}to{transform:translateY(-15px) scale(1)}}
#touch-hint[data-secret]{color:#627b4e}

/* State illustrations use v10. The gallery is a new master-referenced series;
   app screenshots remain actual captures. */
.film-card .film-card__frame{background:#f0e6d6}
.state-stage,.state-stage--zero{display:grid;grid-template-rows:auto minmax(0,1fr);height:580px;min-height:0;row-gap:10px;background:#e5f0e8;box-shadow:0 24px 60px #42694714}
.state-stage--good{background:#ecf2e5}.state-stage--low{background:#f5efdc}.state-stage--zero{background:#f2eae1}
.state-stage .state-stage__art{position:relative;inset:auto;min-height:0;overflow:visible;border-radius:0}
.state-stage .state-stage__character{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;filter:none;transform:none}
.state-stage.is-changing .state-stage__character{opacity:0;transform:translateY(5px)}
.state-stage__summary{padding:42px 9% 0;gap:10px}
.state-stage__message{font-size:13px}
.state-stage__ring{width:80%;height:auto;aspect-ratio:1;right:0;bottom:-3%;box-shadow:0 0 0 35px #ffffff16}
.download>img{width:100%;height:auto;margin:0;filter:none}
.card-character--wink{filter:none;height:auto}
@media(max-width:680px){.state-stage,.state-stage--zero{height:460px;min-height:0}.state-stage__summary{padding:32px 8% 0}.state-stage__message{font-size:12px}.download>img{width:100%;left:0;top:10px}.download__copy{padding-top:340px}}
@media(prefers-reduced-motion:reduce){.noko-secret-glimmer.is-glimmering{animation:none;opacity:.65}.noko-secret-glimmer.is-glimmering i{animation:none}.state-stage.is-changing .state-stage__character{transform:none}}
@media(max-width:680px){.download{display:flex;flex-direction:column;align-items:stretch;min-height:0}.download>img{position:relative;inset:auto;width:min(100%,420px);height:auto;align-self:center;margin:0 auto -20px}.download__copy{padding:12px 28px 42px}}