:root{--paper:#FAF7F0;--pencil:#6E6A66;--ink:#3E4870;--sky:#6FA8C9;--green:#8DB35E;--straw:#E2B45A;--u:min(1vw,1vh)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:none;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--paper);overscroll-behavior:none}
body{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500;color:var(--ink)}
#app{position:fixed;inset:0;overflow:hidden;background:var(--paper)}
#gl{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#pad{position:absolute;left:0;right:0;bottom:0;height:0;display:none;background:var(--paper)}
#pad.on{display:block}
#pad::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 60% at 50% 0%,rgba(110,106,102,.10),transparent 60%)}
#pad .padL,#pad .padR{position:absolute;bottom:18%;width:30vw;height:30vw;max-width:160px;max-height:160px;border-radius:50%;background:radial-gradient(closest-side,rgba(111,168,201,.10),rgba(111,168,201,.16) 70%,rgba(80,110,150,.18) 86%,transparent)}
#pad .padL{left:9vw}#pad .padR{right:9vw;background:radial-gradient(closest-side,rgba(226,180,90,.10),rgba(226,180,90,.16) 70%,rgba(160,120,60,.16) 86%,transparent)}
#touch{position:absolute;inset:0;z-index:5}
#worldUI{position:absolute;inset:0;pointer-events:none;z-index:6}
.kun{position:absolute;width:9.6vh;height:7vh;min-width:46px;min-height:34px;margin:0;transform:translate(-50%,-50%);display:none;background:radial-gradient(closest-side,rgba(62,72,120,.0),rgba(62,72,120,.0) 40%,rgba(62,72,120,.08) 70%,transparent),radial-gradient(9px 7px at 34% 58%,rgba(62,72,120,.62),rgba(62,72,120,.35) 70%,transparent),radial-gradient(9px 7px at 66% 58%,rgba(62,72,120,.62),rgba(62,72,120,.35) 70%,transparent),radial-gradient(22px 16px at 50% 48%,rgba(111,140,190,.22),transparent);opacity:.9}
.kun.on{display:block;animation:kun 1.1s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(111,140,190,.55)) saturate(1.3)}
@keyframes kun{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
#labels div{position:absolute;font-family:Yomogi,sans-serif;font-size:clamp(13px,2.4vh,18px);color:var(--ink);white-space:nowrap;transform:translate(-50%,-100%);transition:opacity .3s}
.line{position:absolute;font-family:Yomogi,sans-serif;font-size:clamp(13px,2.5vh,19px);color:var(--ink);white-space:nowrap;transform:translate(-50%,-100%);opacity:0;transition:opacity .4s}
.line.on{opacity:1}
#hud{position:absolute;inset:0;pointer-events:none;z-index:7}
#goal{position:absolute;top:calc(env(safe-area-inset-top) + 1.2vh);left:50%;transform:translateX(-50%);font-family:Yomogi,sans-serif;font-size:clamp(15px,3.6vh,26px);white-space:nowrap;color:var(--ink);display:flex;gap:.9em;align-items:baseline}
#clock{color:#5A6A8C;font-size:.92em}
#stats{position:absolute;top:calc(env(safe-area-inset-top) + 1.2vh);left:calc(env(safe-area-inset-left) + 2.2vw);font-family:Yomogi,sans-serif;font-size:clamp(14px,3.1vh,22px);line-height:1.25;white-space:nowrap}
#pct{color:#4E7A5A}
#btnPause{position:absolute;top:calc(env(safe-area-inset-top) + 1vh);right:calc(env(safe-area-inset-right) + 2vw);pointer-events:auto}
#btnHome,#btnSleep{position:absolute;right:calc(env(safe-area-inset-right) + 6vw);bottom:38vh;pointer-events:auto}
#btnSniff{position:absolute;right:calc(env(safe-area-inset-right) + 4vw);bottom:calc(env(safe-area-inset-bottom) + 5vh);width:clamp(76px,22vh,140px);height:clamp(58px,16vh,104px);padding:0;pointer-events:auto;transition:transform .18s ease-out;--a:.32}
#btnSniff svg{width:62%;height:auto;display:block;margin:0 auto;opacity:.72;transition:opacity .18s}
#btnSniff.ready{transform:scale(1.14)}
#btnSniff.ready::after{opacity:.7}
#btnSniff.ready svg{opacity:1}
#sniffName{position:absolute;right:calc(env(safe-area-inset-right) + 4vw);width:clamp(76px,22vh,140px);bottom:calc(env(safe-area-inset-bottom) + 5vh + clamp(58px,16vh,104px) + 1.2vh);text-align:center;font-family:Yomogi,sans-serif;font-size:clamp(13px,3vh,19px);color:var(--ink);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;padding:.25em .2em;background:radial-gradient(closest-side,rgba(250,247,240,.95),rgba(250,247,240,.88) 62%,rgba(236,232,222,.55) 82%,rgba(250,247,240,0))}
#sniffName.on{opacity:1}
.tag{position:relative;font-family:Yomogi,sans-serif;color:var(--ink);font-size:clamp(14px,3.1vh,22px);white-space:nowrap;border:0;background:transparent;padding:.55em 1.1em .5em;cursor:pointer;line-height:1.15;--a:.30;isolation:isolate}
.tag::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(130% 120% at 30% 40%,rgba(255,255,255,.0),transparent),var(--paper);clip-path:var(--clip);filter:drop-shadow(0 0 0 transparent)}
.tag::after{content:"";position:absolute;inset:8% 6% 10% 5%;z-index:-1;background:radial-gradient(90% 80% at 45% 55%,var(--wc),transparent 72%),radial-gradient(60% 50% at 70% 35%,var(--wc),transparent 70%);opacity:var(--a);clip-path:var(--clip2);transition:opacity .12s}
.tag.small{font-size:clamp(13px,2.7vh,19px);padding:.45em .9em .4em}
.tag.press::after,.tag:active::after{--a:.62;opacity:.62}
.tag.sel::after{opacity:.6}
.tag b{display:block;font-weight:normal;font-size:1.05em}
.tag small{display:block;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:500;font-size:clamp(9px,1.7vh,12px);color:#5E5A56;margin-top:.25em}
#stick{position:absolute;left:0;top:0;z-index:6;pointer-events:none}
#stick .base{position:absolute;width:120px;height:120px;margin:-60px;border-radius:50%;background:radial-gradient(closest-side,rgba(111,168,201,.06),rgba(111,168,201,.13) 72%,rgba(70,100,140,.2) 88%,transparent)}
#stick .knob{position:absolute;width:52px;height:52px;margin:-26px;border-radius:50%;background:radial-gradient(closest-side,rgba(62,72,120,.18),rgba(62,72,120,.3) 75%,rgba(62,72,120,.38) 88%,transparent)}
.ghost{position:absolute;z-index:6;width:58px;height:74px;margin:-37px 0 0 -29px;pointer-events:none;border-radius:46% 46% 40% 40%/55% 55% 45% 45%;background:radial-gradient(closest-side,rgba(110,106,102,.26),rgba(110,106,102,.14) 70%,transparent)}
#ghostL{animation:ghostDrag 1.6s ease-in-out 2}
#ghostR{animation:ghostTap 1.2s ease-in-out infinite}
@keyframes ghostDrag{0%{transform:translate(0,0);opacity:0}15%{opacity:1}70%{transform:translate(0,-60px);opacity:1}100%{transform:translate(0,-60px);opacity:0}}
@keyframes ghostTap{0%,100%{transform:scale(1);opacity:.4}40%{transform:scale(.86);opacity:1}}
#skip{position:absolute;z-index:8;bottom:calc(env(safe-area-inset-bottom) + 3vh);left:50%;transform:translateX(-50%);font-family:Yomogi,sans-serif;font-size:clamp(12px,2.3vh,16px);color:#7E7A76;pointer-events:none;white-space:nowrap}
#title{position:absolute;inset:0;z-index:7;pointer-events:none}
#logo{position:absolute;left:calc(env(safe-area-inset-left) + 3vw);top:calc(env(safe-area-inset-top) + 2.5vh);width:min(46vw,520px);height:auto;pointer-events:none}
#papers{position:absolute;inset:0;pointer-events:none}
#papers button{position:absolute;pointer-events:auto;background:transparent;border:0;cursor:pointer}
#titleHint{transform:translate(-50%,0);white-space:normal;max-width:88vw;text-align:center;line-height:1.35}
#diffs{position:absolute;left:calc(env(safe-area-inset-left) + 2vw);bottom:calc(env(safe-area-inset-bottom) + 2.5vh);display:flex;gap:1.2vw;pointer-events:auto}
#titleBtns{position:absolute;right:calc(env(safe-area-inset-right) + 2vw);bottom:calc(env(safe-area-inset-bottom) + 2.5vh);display:flex;gap:1vw;pointer-events:auto}
#sheet{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(250,247,240,.55)}
#sheet .paper{position:relative;max-width:min(92vw,760px);max-height:90vh;overflow:auto;padding:3.2vh 4vw;background:var(--paper);clip-path:var(--clip);font-size:clamp(13px,2.6vh,17px);line-height:1.6;color:#4A4744}
#sheet .paper::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 50% at 20% 10%,rgba(111,168,201,.14),transparent 70%),radial-gradient(60% 40% at 90% 90%,rgba(141,179,94,.14),transparent 70%)}
#sheet h2{font-family:Yomogi,sans-serif;font-weight:normal;font-size:clamp(17px,3.6vh,26px);color:var(--ink);margin-bottom:1.2vh}
.steps{display:flex;gap:2vw;flex-wrap:wrap;margin-bottom:1.6vh}
.step{flex:1 1 30%;min-width:150px;position:relative;padding:1.2vh 1vw 1.2vh 2.8em}
.step .n{position:absolute;left:.2em;top:.6vh;width:1.9em;height:1.9em;border-radius:50%;font-family:Yomogi,sans-serif;display:flex;align-items:center;justify-content:center;color:var(--ink);background:radial-gradient(closest-side,rgba(226,180,90,.25),rgba(226,180,90,.42) 78%,rgba(190,140,60,.35) 90%,transparent)}
.step .under{display:block;font-family:Yomogi,sans-serif;color:#4E7A5A;margin-top:.5vh}
.row{display:flex;gap:1.5vw;flex-wrap:wrap;align-items:center;margin-top:1.2vh}
.slider{position:relative;width:min(56vw,300px);height:36px;touch-action:none}
.slider .rail{position:absolute;left:0;right:0;top:16px;height:4px;background:rgba(110,106,102,.25);border-radius:2px}
.slider .fill{position:absolute;left:0;top:13px;height:10px;border-radius:5px;background:radial-gradient(60% 100% at 50% 50%,rgba(111,168,201,.5),rgba(111,168,201,.32))}
.slider .dot{position:absolute;top:4px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:radial-gradient(closest-side,rgba(62,72,120,.25),rgba(62,72,120,.45) 80%,transparent)}
.lbl{font-family:Yomogi,sans-serif;font-size:clamp(14px,2.8vh,19px);min-width:4.5em;color:var(--ink)}
#result{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4vh;background:var(--paper);padding:2vh 2vw calc(env(safe-area-inset-bottom) + 2vh)}
#resultPaper{position:relative;flex:0 1 auto;display:flex;justify-content:center}
#paintCv{display:block;width:auto;height:auto;max-width:94vw;max-height:66vh}
#resultText{font-family:Yomogi,sans-serif;font-size:clamp(15px,3.2vh,22px);color:var(--ink);white-space:nowrap;display:flex;gap:1.6em}
#resultBtns{display:flex;gap:3vw}
#fade{position:absolute;inset:0;z-index:30;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .45s}
#fade.on{opacity:1}
#loading{position:absolute;inset:0;z-index:40;background:var(--paper);display:flex;align-items:center;justify-content:center;font-family:Yomogi,sans-serif;font-size:20px;color:var(--pencil)}
#loading.done{display:none}
@media (orientation:portrait){
  #diffs{left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 10vh);gap:1.2vh;flex-direction:column;align-items:center}
  #diffs .tag{min-width:62vw;text-align:center;padding:.4em 1em .35em}
  #titleBtns{left:50%;right:auto;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 3vh)}
  #logo{width:min(84vw,520px);left:50%;transform:translateX(-50%)}
  #btnHome,#btnSleep{bottom:47vh}
  #btnSniff{width:clamp(76px,24vw,130px);height:clamp(58px,18vw,96px);bottom:calc(env(safe-area-inset-bottom) + 11vh);right:9vw}
  #sniffName{width:clamp(76px,24vw,130px);right:9vw;bottom:calc(env(safe-area-inset-bottom) + 11vh + clamp(58px,18vw,96px) + 1vh)}
  #goal{font-size:clamp(12px,2.1vh,18px);gap:.6em;left:calc(env(safe-area-inset-left) + 2.2vw);transform:none}
  #stats{top:calc(env(safe-area-inset-top) + 1.2vh + 2.4em);font-size:clamp(12px,2.2vh,18px)}
  .tag{font-size:clamp(13px,2.1vh,20px)}
  .tag small{font-size:clamp(9px,1.35vh,12px)}
}

.ico{display:inline-block;width:1.7em;height:1.7em;background-image:url(../art/props_atlas.png);background-size:300% 300%;vertical-align:-0.55em;margin-right:.15em}
#storyArt{position:absolute;inset:0;z-index:7;overflow:hidden;pointer-events:none;background:var(--paper)}
#storyArt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,rgba(0,0,0,.6) 80%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 62%,rgba(0,0,0,.6) 80%,transparent 100%);transform-origin:50% 55%}
#caption{position:absolute;z-index:8;left:50%;bottom:calc(env(safe-area-inset-bottom) + 12vh);transform:translateX(-50%);font-family:Yomogi,sans-serif;font-size:clamp(16px,4.2vh,28px);color:#3E4870;white-space:nowrap;opacity:0;transition:opacity .8s;pointer-events:none;padding:.3em 1.2em;background:radial-gradient(closest-side,rgba(250,247,240,.9),rgba(250,247,240,.7) 65%,rgba(250,247,240,0))}
#caption.on{opacity:1}