*{box-sizing:border-box} :root{color-scheme:light;--ivory:#f6f3e9;--ink:#42453b}body{margin:0;overflow:hidden;background:#52645b;color:var(--ivory);font-family:'Helvetica Neue','Noto Sans',Arial,sans-serif;font-size:13px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ddb386;outline-offset:5px}button{color:inherit;border:0;background:none}#landscape,.shade{position:fixed;inset:0}#landscape{background-size:cover;background-position:center;transition:opacity .7s;background-image:url('https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=2400&q=85')}.shade{background:linear-gradient(180deg,#13232166,transparent 45%,#15251e55);pointer-events:none}header{position:fixed;top:36px;left:48px;right:48px;display:flex;justify-content:space-between;align-items:center;z-index:10}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:20px}.brand-jp{font-family:serif;font-size:35px;letter-spacing:5px}.brand-dot{color:#ddac7b}.brand-en{font-size:10px;letter-spacing:3px;border-left:1px solid #ffffff40;padding-left:22px}.top-actions{display:flex;align-items:center;gap:24px}.top-actions button{font-size:11px;letter-spacing:1px}.top-actions button span{font-size:20px;margin-right:9px}.icon-button{font-size:20px!important;opacity:.8}.intro{position:absolute;top:23vh;left:8.5vw;pointer-events:none;transition:opacity .4s}.eyebrow{font-size:9px;letter-spacing:3px;opacity:.75;margin-bottom:26px}h1{font:400 clamp(25px,3.2vw,46px)/1.8 'Yu Mincho','Hiragino Mincho ProN',serif;letter-spacing:5px;margin:0 0 24px}.intro-copy{font-size:12px;line-height:2.3;letter-spacing:2px;opacity:.8}.scene-label{position:fixed;left:48px;bottom:110px;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:1.5px}.scene-line{width:28px;height:1px;background:#ffffff80}.scene-count{opacity:.5;margin-left:9px;font-size:9px}.view-hint{position:fixed;right:8vw;top:44vh;font-size:10px;letter-spacing:2px;opacity:.8;display:flex;flex-direction:column;align-items:center;gap:20px}.view-hint span{font-size:23px;opacity:.6}#book{position:fixed;top:56vh;left:50%;width:min(760px,78vw);height:650px;transform:translateX(-50%);z-index:3;will-change:top;transition:top .55s cubic-bezier(.22,1,.36,1)}#book.dragging{transition:none}.book-body{position:relative;padding:17px 16px 18px 27px;background:#605b4d;border-radius:5px;box-shadow:0 20px 70px #0007,0 2px 4px #0008;transform:rotate(-1.5deg);border:1px solid #8a8371}.binding{position:absolute;left:9px;top:18px;bottom:18px;width:8px;border-radius:2px;background:repeating-linear-gradient(180deg,#312f28 0 4px,#c4baa0 5px 6px,transparent 7px 20px)}.paper{position:relative;background-color:#f5f1e5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23706145' opacity='.07' filter='url(%23n)' d='M0 0h200v200H0z'/%3E%3C/svg%3E");box-shadow:1px 2px 2px #0003,3px 4px #e3ddcd,5px 7px #bfb8a5}canvas{display:block;width:100%;aspect-ratio:1600/1040;touch-action:none;cursor:none}#paperHint{position:absolute;top:45%;left:0;width:100%;text-align:center;pointer-events:none;color:#827f73;font-family:serif;font-size:12px;letter-spacing:3px;transition:opacity .7s}.paper-footer{position:absolute;bottom:14px;left:20px;right:20px;display:flex;justify-content:space-between;color:#999385;font-size:8px;letter-spacing:2px;pointer-events:none}#grip{position:absolute;left:50%;top:-38px;transform:translateX(-50%);width:210px;height:38px;background:#f0ece0eb;border-radius:14px 14px 0 0;color:#696a5f;touch-action:none;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px;box-shadow:0 -4px 15px #0001;cursor:ns-resize}#grip>span{width:34px;height:3px;border-radius:4px;background:#a7a496}#grip small{font-size:9px;letter-spacing:1.5px}#handAsset{position:absolute;left:-23%;top:-7%;width:123%;height:auto;pointer-events:none;z-index:-1;filter:drop-shadow(0 15px 18px #0003)}footer{position:fixed;left:48px;right:48px;bottom:28px;z-index:8;display:flex;align-items:center;justify-content:space-between}.footer-note{font-size:10px;letter-spacing:2px;display:flex;gap:10px;align-items:center}.footer-note i{width:4px;height:4px;background:#ddac7b;border-radius:50%}.tools{display:flex;align-items:center;gap:7px;background:#f7f4e9ee;color:#605e53;border:1px solid #ffffff6b;border-radius:40px;padding:8px 13px;box-shadow:0 7px 24px #0002;backdrop-filter:blur(15px)}.tools button{padding:9px 12px;font-size:11px;white-space:nowrap}.tools button.active{background:#e6e0d3;border-radius:20px;color:#544c40}.tools button>span:first-child{font-size:16px;margin-right:7px}.divider{height:18px;width:1px;background:#c5c0b4;margin:0 6px}.help-button{border:1px solid #ffffff60;border-radius:50%;width:27px;height:27px;font-family:serif}#settings{position:fixed;right:40px;top:90px;width:290px;background:#f5f1e7f5;color:var(--ink);padding:24px;border-radius:12px;z-index:20;box-shadow:0 15px 50px #0002}h2{font:400 21px/1.6 serif}#settings h2{font-size:17px;margin:0 0 20px}#settings label{display:flex;justify-content:space-between;gap:14px;margin:20px 0;align-items:center}#settings small{display:block;font-size:9px;opacity:.65;margin-top:5px}#settings input{accent-color:#786b51}#settings p{font-size:10px;line-height:1.8;opacity:.6}.size-label{flex-direction:column;align-items:stretch!important}dialog{border:0;border-radius:12px;background:#f5f1e9;color:#525347;max-width:460px;padding:40px;line-height:2}dialog::backdrop{background:#14221c80;backdrop-filter:blur(8px)}dialog p{font-size:12px}dialog .close{position:absolute;right:15px;top:10px;font-size:24px}#startDrawing{margin-top:15px;background:#5f6b5b;border-radius:25px;padding:11px 22px;color:#fff}#toast{position:fixed;top:110px;left:50%;transform:translateX(-50%);background:#f6f2e9;color:#555749;padding:12px 24px;border-radius:30px;z-index:30;opacity:0;transition:opacity .3s;pointer-events:none;font-size:12px}#cigarette{position:fixed;z-index:12;pointer-events:none;display:none;transform:rotate(-32deg);transform-origin:0 50%;width:120px;height:9px}.ember{position:absolute;left:0;width:6px;height:9px;background:#ce663b;border-radius:50%;box-shadow:0 0 9px #ef6c35}.ash-tip{position:absolute;left:4px;width:12px;height:9px;background:repeating-linear-gradient(40deg,#74716a 0 2px,#cbc5b5 3px 4px)}.cig-body{position:absolute;left:16px;width:70px;height:9px;background:linear-gradient(#eee8dc,#d1cab8,#f2eddf);border-radius:1px}.filter{position:absolute;left:86px;width:30px;height:9px;background:linear-gradient(#cda273,#aa7950,#d9b084);border-radius:0 2px 2px 0}.smoke{position:absolute;left:0;bottom:8px;width:14px;height:60px;border-left:1px solid #f7f4e580;border-radius:50%;filter:blur(1px);animation:smoke 4s ease-in-out infinite}@keyframes smoke{50%{transform:translate(-8px,-15px) skewX(20deg);opacity:.2}}body.raised .intro{opacity:0}body.raised #viewHint{opacity:0}body.outdoor #landscape{filter:brightness(.45)}body.outdoor .intro{display:none}@media(max-width:650px){header{top:24px;left:24px;right:24px}.brand{gap:10px}.brand-jp{font-size:27px}.brand-en{font-size:8px;padding-left:12px;letter-spacing:1.5px}.top-actions{gap:12px}.top-actions button{font-size:9px}.intro{top:21vh;left:9vw}h1{font-size:27px;letter-spacing:3px}.eyebrow{font-size:8px;letter-spacing:2px}.intro-copy{font-size:11px}#book{width:94vw;top:61vh}.book-body{padding:13px 12px 14px 21px}.binding{left:6px;width:7px}.scene-label{left:24px;bottom:106px;font-size:9px}footer{left:18px;right:18px;bottom:max(20px,env(safe-area-inset-bottom))}.footer-note{display:none}.tools{margin:auto;padding:6px;gap:0}.tools button{padding:10px;font-size:10px}.tools button>span:first-child{font-size:12px;margin-right:3px}.help-button{position:absolute;right:0;bottom:65px}.view-hint{right:10vw;top:47vh;font-size:9px}#settings{right:20px;top:78px}#paperHint{font-size:10px;letter-spacing:1px}dialog{width:90vw;padding:28px}#handAsset{width:135%;left:-35%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Photographic paper crop excludes every part of the arm and sleeve. */
.paper{background-image:url('assets/sketchbook-photo.png');background-size:131% 146.3%;background-position:74% 47%}
#handAsset{left:4%;top:-36px;width:150px;height:auto;z-index:5;filter:drop-shadow(0 3px 2px #0002)}
@media(max-width:650px){#handAsset{left:3%;top:-26px;width:110px}}
.brand-jp,.brand-en{white-space:nowrap}.top-actions{flex-shrink:0}.top-actions button{white-space:nowrap}
@media(max-width:650px){header{left:20px;right:20px}.brand-jp{font-size:25px;letter-spacing:3px}.brand-en{font-size:7px;letter-spacing:1px;padding-left:9px}.brand{gap:7px}.top-actions{gap:8px}.top-actions button span{margin-right:3px}.intro{left:9vw;right:6vw}h1{font-size:clamp(21px,5.8vw,28px);letter-spacing:2px;line-height:1.9}.intro-copy{font-size:10px}.eyebrow{font-size:7px;letter-spacing:1.7px}canvas{aspect-ratio:4/5}.paper-footer{bottom:12px}#paperHint{padding:0 10px}#grip{width:180px}}

/* Plain paper, with a modest, faceted tool interface. */
:root{--ui-face:#c3c7b2;--ui-edge:#626e5d;--ui-dark:#344433;--ui-light:#e0e4cc}
body{font-family:ui-monospace,'Hiragino Kaku Gothic ProN','Yu Gothic',monospace}
.book-body{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.paper{box-shadow:1px 2px 3px #0003,2px 4px #e3ddcd,4px 6px #c7c0ae}
.paper-footer{justify-content:flex-end}
header{top:24px;left:28px;right:28px;gap:12px}
.brand{gap:10px}.brand-jp{font-family:inherit;font-size:22px;letter-spacing:0}.brand-dot{color:var(--ui-light)}
.brand-en{border:0;padding-left:0;font-size:10px;letter-spacing:0;opacity:.7}
.top-actions{gap:8px}.top-actions button{letter-spacing:0;font-size:11px}.top-actions button span{font-size:14px;margin-right:4px}
.top-actions button,.tools button,.help-button,#startDrawing,#grip{border-radius:0;background:linear-gradient(135deg,var(--ui-light) 0 8px,transparent 8px),linear-gradient(315deg,#9ca78e 0 8px,transparent 8px),var(--ui-face);border:1px solid var(--ui-edge);box-shadow:inset 2px 2px #e0e4cc,inset -2px -2px #939d82,2px 3px 0 #26392666;color:var(--ui-dark)}
.top-actions button{padding:9px 11px}.icon-button{font-size:11px!important;opacity:1}
button:active{filter:brightness(.92)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px dashed #e4deae;outline-offset:3px}
.intro{top:25vh;left:8vw}.eyebrow{font-size:11px;letter-spacing:0;opacity:.75;margin-bottom:17px}
h1{font:400 clamp(20px,2.3vw,30px)/1.8 ui-monospace,'Yu Gothic',monospace;letter-spacing:0;margin-bottom:18px;text-shadow:1px 2px #273a3055}
.intro-copy{font-size:11px;letter-spacing:0}.view-hint{font-size:10px;letter-spacing:0;opacity:.8}
#grip{top:-34px;height:34px;width:190px;gap:3px;box-shadow:inset 2px 2px #e0e4cc,inset -2px -2px #939d82}
#grip>span{border-radius:0;width:28px;height:3px;background:#68775c}#grip small{font-size:10px;letter-spacing:0}
.tools{background:none;border:0;border-radius:0;padding:0;gap:5px;box-shadow:none;backdrop-filter:none}
.tools button{padding:12px 14px;font-size:11px}.tools button.active{background:linear-gradient(135deg,#aab49b 0 8px,transparent 8px),#b3bea5;color:#344433;border-radius:0;box-shadow:inset 2px 2px #89967c,inset -2px -2px #d3d8be,2px 3px 0 #26392666}
.tools button>span:first-child{font-size:12px;margin-right:4px}.divider{display:none}
.help-button{width:30px;height:30px;font-family:inherit}.footer-note{letter-spacing:0}.footer-note i{border-radius:0;background:#c1caa6}
.scene-label{letter-spacing:0;gap:9px}.scene-line{width:10px;height:6px;background:#c1caa6;clip-path:polygon(0 100%,45% 0,100% 100%)}
#settings,dialog{background:linear-gradient(135deg,#dce0c8 0 18px,transparent 18px),linear-gradient(315deg,#9ca78e 0 18px,transparent 18px),#c8ccb8;border:1px solid #69775f;border-radius:0;box-shadow:inset 3px 3px #e1e5ce,inset -3px -3px #9ea98d,5px 6px 0 #273b2f66;color:#354233;backdrop-filter:none}
h2{font-family:inherit;font-size:18px}#settings input{accent-color:#617451}dialog::backdrop{backdrop-filter:none;background:#1b2b2266}#startDrawing{color:#344433}
#toast{border-radius:0;background:#c8ccb8;border:1px solid #69775f;color:#354233;box-shadow:3px 3px #273b2f66}
@media(max-width:650px){header{top:20px;left:14px;right:14px;gap:8px}.brand-jp{font-size:20px}.brand-en{display:none}.top-actions{gap:6px}.top-actions button{font-size:10px;padding:8px 10px}.intro{left:8vw;right:5vw}h1{font-size:clamp(19px,5.4vw,26px);letter-spacing:0}.intro-copy{font-size:10px}#grip{width:170px}.tools{gap:4px}.tools button{padding:11px 9px;font-size:10px}.tools button>span:first-child{font-size:11px;margin-right:2px}.scene-label{left:22px}#settings{right:14px;top:70px;width:min(290px,calc(100vw - 28px))}}
/* Northern winter: muted metal, cold paper light, a small ember. */
:root{--ui-face:#aeb5b5;--ui-edge:#596367;--ui-dark:#303a3e;--ui-light:#d0d6d3;--tobacco:70px}
.shade{background:linear-gradient(180deg,#101e2a66,#263c4920 45%,#101c2866)}
#handAsset{filter:brightness(.62) saturate(.47) contrast(1.12) drop-shadow(1px 3px 3px #111b2490)}
.top-actions button,.tools button,.help-button,#startDrawing,#grip{background:linear-gradient(135deg,#d1d8d5 0 8px,transparent 8px),linear-gradient(315deg,#7e8c91 0 8px,transparent 8px),var(--ui-face);box-shadow:inset 2px 2px #cbd4d4,inset -2px -2px #7b8a90,2px 3px #18232b66}
.tools button.active{background:linear-gradient(135deg,#9aa7ae 0 8px,transparent 8px),#9aa7aa;color:#303c42;box-shadow:inset 2px 2px #708189,inset -2px -2px #c3cbca,2px 3px #18232b66}
#settings,dialog{background:linear-gradient(135deg,#ccd3d2 0 18px,transparent 18px),linear-gradient(315deg,#839299 0 18px,transparent 18px),#b3bdbd;color:#303b40;border-color:#596a74;box-shadow:inset 3px 3px #d4dcda,inset -3px -3px #7f9097,5px 6px #17232d66}
#toast{background:#b3bdbd;color:#303b40;border-color:#596a74}.footer-note i{background:#aab9bd}
#cigarette{height:11px;width:calc(var(--tobacco) + 46px);filter:drop-shadow(2px 3px 1px #18212b66)}
.ember{height:11px;width:5px;border-radius:0;clip-path:polygon(20% 0,100% 15%,90% 90%,0 100%,12% 48%);background:linear-gradient(90deg,#57291f,#c05a32 55%,#6e3526);box-shadow:0 0 4px #a84227}
.ash-tip{left:4px;width:12px;height:11px;clip-path:polygon(8% 8%,100% 0,100% 100%,0 83%,15% 40%);background:repeating-linear-gradient(25deg,#474e50 0 2px,#8d9290 2px 3px,#646c6b 4px 5px)}
.cig-body{left:16px;width:var(--tobacco);height:11px;border-radius:0;background:linear-gradient(180deg,#d4d7ce 0 25%,#a5aca7 25% 70%,#777f7c 70%);border-top:1px solid #e0e2d5}
.filter{left:calc(var(--tobacco) + 16px);height:11px;width:30px;border-radius:0;clip-path:polygon(0 0,93% 0,100% 25%,100% 80%,93% 100%,0 100%);background:repeating-linear-gradient(90deg,#9c8463 0 2px,#8d7558 2px 3px);border-top:3px solid #b59a73;border-bottom:3px solid #685949}
.smoke{border-color:#cad4d466;filter:blur(1.5px)}
#ritual{position:fixed;left:28px;bottom:120px;z-index:9;width:152px;color:#e0e5df;font-size:10px;letter-spacing:0;text-shadow:1px 1px #17232b}
.ritual-objects{position:relative;height:103px;display:flex;align-items:flex-end;gap:26px}
.pack{position:relative;width:64px;height:92px;padding:0;transform:rotate(-5deg);filter:drop-shadow(3px 5px 2px #12202b66);text-shadow:none}
.pack-front{position:absolute;inset:23px 0 0;display:flex;align-items:center;flex-direction:column;background:#c8c8bc;border:1px solid #6d7373;border-right:5px solid #969f9f;overflow:hidden;color:#313d42;padding-top:10px}
.pack-front b{font:700 12px Georgia,serif;letter-spacing:1.3px;z-index:1}.pack-front small{font:6px monospace;letter-spacing:1px;z-index:1}.pack-front em{font:5px monospace;margin-top:5px;z-index:1}.pack-bottom{position:absolute;bottom:5px;color:#dedbd1}
.pack-mountain{position:absolute;inset:33px 0 0;background:#783834;clip-path:polygon(0 30%,23% 15%,48% 47%,69% 0,100% 36%,100% 100%,0 100%)}
.pack-lid{position:absolute;left:0;right:0;top:0;height:25px;background:linear-gradient(135deg,#9d5149 0 50%,#793934 50%);border:1px solid #75423c;border-right:5px solid #593b3b;z-index:3;transform-origin:50% 100%;transition:transform .45s}
.pack-lid:after{content:'';position:absolute;left:8px;top:6px;width:35px;height:1px;background:#bb8b7b;transform:rotate(-12deg)}
.pack-sticks{position:absolute;left:5px;top:6px;display:flex;gap:3px}.pack-sticks i{display:block;width:9px;height:25px;background:linear-gradient(90deg,#989f99,#e1ddcf 45%,#777e79);border-top:4px solid #9d8665}
body:not([data-ritual=packed]) .pack-lid{transform:translateY(-13px) rotate(-22deg)}
:is(#lighter,.lighter-drag){position:relative;width:28px;height:61px;padding:0;background:none;box-shadow:none;border:0;opacity:.65;filter:drop-shadow(2px 3px 1px #17232b88)}:is(#lighter,.lighter-drag):disabled{cursor:default}:is(#lighter,.lighter-drag):not(:disabled){opacity:1}
.lighter-body{position:absolute;bottom:0;left:0;width:28px;height:43px;background:linear-gradient(110deg,#56666e 0 28%,#394c57 28% 78%,#293b47 78%);clip-path:polygon(0 0,100% 0,100% 91%,85% 100%,10% 100%,0 90%)}
.lighter-top{position:absolute;bottom:43px;left:0;width:28px;height:16px;background:linear-gradient(135deg,#b2b9b4 0 40%,#65757b 40%);clip-path:polygon(0 30%,14% 0,75% 0,75% 40%,100% 40%,100% 100%,0 100%)}
.flame{display:none;position:absolute;left:8px;bottom:60px;width:13px;height:30px;background:linear-gradient(#d2a665,#e0be77 65%,#738da6);clip-path:polygon(45% 0,90% 55%,100% 85%,65% 100%,15% 90%,0 65%)}
body[data-ritual=lighting] .flame{display:block;animation:flame .18s steps(2) infinite}body[data-ritual=lighting] :is(#lighter,.lighter-drag){opacity:1}
@keyframes flame{50%{transform:scaleX(.7) skewX(7deg)}}
#ritualStatus{line-height:1.7;margin:10px 0 5px;max-width:150px}.burn-track{height:2px;width:100px;background:#80909855;display:none}#burnLevel{display:block;height:100%;width:100%;background:#9da9a6}body[data-ritual=lit] .burn-track{display:block}#discard{padding:5px 0;color:#d1d9d7;font-size:9px;text-shadow:1px 1px #17232b;text-decoration:underline;text-underline-offset:3px}
body:not([data-ritual=lit]) canvas{cursor:crosshair}
.scene-label{bottom:92px}
@media(max-width:650px){#ritual{left:14px;bottom:108px;width:128px;transform:scale(.8);transform-origin:bottom left}.scene-label{bottom:85px;font-size:8px}#ritualStatus{font-size:11px}body.raised #ritual{opacity:.92}#handAsset{filter:brightness(.62) saturate(.47) contrast(1.12) drop-shadow(1px 3px 3px #111b2490)}}
@media(prefers-reduced-motion:reduce){.pack-lid{transition:none}}
body,button,input,a,h1,h2,small,b,em,.brand-jp,.brand-en,.pack-front b,.pack-front small,.pack-front em,.help-button,#paperHint{font-family:'DotGothic16',ui-monospace,monospace!important;font-weight:400}
#ritualStatus:empty{display:none}#ritual{bottom:112px}.burn-track{margin-top:12px}
.lighter-drag{position:fixed!important;z-index:50!important;pointer-events:none!important;opacity:1!important;transform:none!important;width:28px;height:61px}
.lighter-drag .flame{display:block;animation:flame .18s steps(2) infinite}
body.lighter-moving #lighter{opacity:.2}#lighter{touch-action:none;cursor:grab}#lighter:active{cursor:grabbing}
body.burn-armed #lighter{outline:2px dashed #bca078;outline-offset:7px}body.burn-armed #clear{background:#a49987}
body.over-paper .paper{outline:1px dashed #b0764e;outline-offset:3px}
body.paper-burning .paper{pointer-events:none;mask-image:radial-gradient(circle at var(--burn-x) var(--burn-y),transparent 0 var(--burn-radius),#000 calc(var(--burn-radius) + 2%));-webkit-mask-image:radial-gradient(circle at var(--burn-x) var(--burn-y),transparent 0 var(--burn-radius),#000 calc(var(--burn-radius) + 2%))}
body.paper-burning .paper:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--burn-x) var(--burn-y),transparent 0 var(--burn-radius),#8f491ee6 calc(var(--burn-radius) + 1%),#38291ee6 calc(var(--burn-radius) + 2.5%),transparent calc(var(--burn-radius) + 4%));mix-blend-mode:multiply}
body.paper-burning #paperHint{visibility:hidden}button:disabled{cursor:default;opacity:.5}
@media(max-width:650px){#ritual{bottom:112px}}
/* One physical cigarette: extracted, brought to the flame, then used to draw. */
body[data-ritual=unlit] #cigarette .ember,body[data-ritual=unlit] #cigarette .smoke,body[data-ritual=lighting] #cigarette .smoke{display:none}
body[data-ritual=unlit] #cigarette .ash-tip{background:linear-gradient(#d4d7ce 25%,#a5aca7 25% 70%,#777f7c 70%);clip-path:polygon(10% 0,100% 0,100% 100%,0 90%)}
body[data-ritual=lighting] #cigarette .ember{animation:ember-catch 1s ease-in forwards}
@keyframes ember-catch{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#cigarette{animation:none!important}}
/* A visible grip on the pack and a lighter legible on dark and bright scenes. */
.pack{touch-action:none}
body[data-ritual=open] .pack-sticks,body[data-ritual=spent] .pack-sticks{top:-14px;left:0;width:64px;height:46px;padding:5px 6px;z-index:4;cursor:grab;touch-action:none}
body[data-ritual=open] .pack-sticks i,body[data-ritual=spent] .pack-sticks i{height:30px;border-top:6px solid #ccb590;box-shadow:1px 0 #3b4748;pointer-events:none}
body[data-ritual=open] .pack-sticks i:first-child,body[data-ritual=spent] .pack-sticks i:first-child{transform:translateY(-7px);outline:1px solid #e3dfc2;outline-offset:1px}
body[data-ritual=open] .pack-sticks:after,body[data-ritual=spent] .pack-sticks:after{content:'↑';position:absolute;left:5px;top:-24px;font-size:16px;color:#ecebd7;text-shadow:1px 1px #1b272c,-1px -1px #1b272c;pointer-events:none}
body[data-ritual=open] .pack-lid,body[data-ritual=spent] .pack-lid{transform:translate(-13px,-11px) rotate(-44deg)}
:is(#lighter,.lighter-drag){opacity:1;filter:drop-shadow(1px 0 0 #e4e4ce) drop-shadow(-1px 0 0 #e4e4ce) drop-shadow(0 1px 0 #e4e4ce) drop-shadow(0 -1px 0 #e4e4ce) drop-shadow(2px 3px 2px #17232baa)}
.lighter-body{background:linear-gradient(110deg,#aebfc2 0 28%,#738c9a 28% 78%,#435c6b 78%)}
.lighter-top{background:linear-gradient(135deg,#e7e6d9 0 40%,#8c9da4 40%)}
#lighter:before{content:'';position:absolute;inset:-9px -10px -8px;background:#27384360;border:1px solid #d9dfd27a;clip-path:polygon(12% 0,88% 0,100% 10%,100% 90%,88% 100%,12% 100%,0 90%,0 10%);pointer-events:none}
/* Translucent turquoise disposable lighter, shaped after the reference. */
:is(#lighter,.lighter-drag){width:32px;height:90px;filter:drop-shadow(2px 4px 2px #12232b55);opacity:1}
#lighter:before{display:none}
.lighter-body{width:32px;height:68px;bottom:0;clip-path:polygon(0 0,100% 0,100% 94%,86% 100%,10% 100%,0 94%);background:linear-gradient(100deg,#7ed1cd9c 0 16%,#17a9b6b5 16% 77%,#078892c9 77%);border-bottom:5px solid #b0c1aaa6;box-shadow:inset 3px 0 #d3ece54d,inset 0 4px #087b8f75}
.lighter-body:before{content:'';position:absolute;left:16px;top:4px;width:3px;height:55px;background:#1d7c8a66;box-shadow:-7px 4px 0 2px #79c0b72b}
.lighter-body:after{content:'';position:absolute;left:7px;top:8px;width:15px;height:27px;border:1px solid #126b7a55;background:linear-gradient(90deg,#5cb8b252,#087b8d42);clip-path:polygon(0 0,100% 0,100% 75%,65% 100%,0 93%)}
.lighter-top{bottom:68px;width:32px;height:22px;background:linear-gradient(105deg,#c8cab6 0 12%,#727f7a 12% 40%,#273632 40% 68%,#c4d2ce 68% 100%);clip-path:polygon(0 21%,16% 4%,66% 0,100% 12%,100% 100%,0 100%);box-shadow:inset 0 2px #ecebdd}
.lighter-top:before{content:'';position:absolute;left:5px;top:8px;width:3px;height:8px;background:#172a29;box-shadow:7px -2px #172a29}
.lighter-top:after{content:'';position:absolute;right:0;top:6px;width:9px;height:15px;background:repeating-linear-gradient(90deg,#b8ccc9 0 1px,#d7e4dc 1px 2px);clip-path:polygon(0 0,100% 10%,100% 100%,0 100%)}
.flame{bottom:90px;left:9px}
.lighter-drag{width:32px!important;height:90px!important}
/* Larger objects, with longer sticks exposed when the lid is open. */
.pack{transform:rotate(-5deg) scale(1.25);transform-origin:bottom left}
.ritual-objects{height:130px;gap:44px}
#ritual{width:180px}
body[data-ritual=open] .pack-sticks,body[data-ritual=spent] .pack-sticks{top:-35px;height:68px}
body[data-ritual=open] .pack-sticks i,body[data-ritual=spent] .pack-sticks i{height:54px;border-top:9px solid #ccb590}
body[data-ritual=open] .pack-sticks i:first-child,body[data-ritual=spent] .pack-sticks i:first-child{transform:translateY(-11px);outline:0}
body[data-ritual=open] .pack-sticks:after,body[data-ritual=spent] .pack-sticks:after{top:-28px}
#cigarette{transform:rotate(-32deg) scale(1.25);transform-origin:0 50%}
@media(max-width:650px){#ritual{transform:none;width:180px;left:18px;bottom:112px}.ritual-objects{gap:40px}#ritualStatus{max-width:170px;font-size:10px}}
/* Enlarged preparation stage uses the actual pack, lighter and single cigarette. */
.pack-seal{position:absolute;left:-2px;right:0;top:19px;height:11px;z-index:6;display:none;background:#c3b38c;color:#443b32;font-size:5px;line-height:11px;border-top:1px dashed #655a45;transform:rotate(-3deg);white-space:nowrap}
body[data-ritual=packed] .pack-seal,body[data-ritual=sealed] .pack-seal{display:block}
.seal-broken .pack-seal{display:none!important}
body[data-ritual=sealed] .pack-lid{transform:none}body[data-ritual=sealed] .pack-sticks{visibility:hidden}
#preparation{width:min(540px,calc(100vw - 28px));max-width:540px;padding:30px 24px 26px;overflow:visible}
#preparation::backdrop{background:#12232cd6;backdrop-filter:blur(5px)}
#closePreparation{position:absolute;right:12px;top:7px;font-size:25px;color:#34434b;padding:4px 9px}
.prep-heading{text-align:center;margin:0 0 30px;font-size:17px!important;letter-spacing:3px}.prep-hint{text-align:center;font-size:10px!important;margin:20px 0 0;color:#46565d}
#prepStage{min-height:290px;display:flex;justify-content:center;align-items:flex-end}
#preparation #ritual{position:relative;left:auto;bottom:auto;transform:none;width:280px;z-index:auto;text-shadow:none;color:#34434b}
#preparation .ritual-objects{height:230px;gap:145px;justify-content:center;padding-bottom:16px}
#preparation .pack{transform:rotate(-5deg) scale(2);flex-shrink:0}
#preparation #lighter{transform:scale(1.65);transform-origin:bottom center;flex-shrink:0}
#preparation #ritualStatus{max-width:280px;text-align:center;font-size:12px;margin:28px 0 0;min-height:40px;line-height:1.8}
#preparation #cigarette{--cig-scale:2.1;transform:rotate(-32deg) scale(var(--cig-scale))}
#preparation .burn-track,#preparation #dropAsh{display:none!important}
#dropAsh{margin-top:9px;padding:7px 10px;color:#d9e1da;font-size:10px;background:#273a4266;border:1px solid #9eafb15c;touch-action:manipulation}#dropAsh:disabled{opacity:.45}
.ash-tip{left:calc(16px - var(--ash-length,5px));width:var(--ash-length,5px);height:11px}.ember{left:12px}.smoke{left:12px}
body[data-ritual=unlit] .ash-tip{width:12px;left:4px}
.falling-ash{position:fixed;z-index:50;width:3px;height:3px;background:#a4a69b;pointer-events:none;animation:ash-fall .85s ease-in forwards}
@keyframes ash-fall{to{transform:translate(var(--drift),65px) rotate(130deg);opacity:0}}
@media(max-width:650px){#preparation{padding:25px 15px 20px}#preparation #ritual{width:250px}#preparation .ritual-objects{gap:110px;height:235px}.prep-hint{font-size:9px!important;letter-spacing:0}#prepStage{min-height:290px}#ritual:has(#dropAsh:not([hidden])){bottom:100px}}
#prepStage{min-height:340px}
@media(max-width:650px){#prepStage{min-height:340px}}
/* Fine print and an invented northern print-house identity. */
.pack-front{padding-top:4px;background:linear-gradient(110deg,#dedacc,#bcbfb2);border-right-color:#8c9793}
.pack-crest{font-size:8px;line-height:9px;color:#79745b;z-index:1}.pack-front b{font-size:13px;line-height:15px;letter-spacing:1.2px}.pack-front>small{font-size:4px;letter-spacing:.5px;line-height:7px}.pack-front em{font-size:3.5px;margin-top:1px;line-height:6px;letter-spacing:.25px}
.pack-mountain{inset:24px 0 0;background:linear-gradient(145deg,#914d44,#612f2d);clip-path:polygon(0 16%,19% 2%,40% 25%,66% 0,100% 24%,100% 100%,0 100%)}
.pack-ridge{position:absolute;inset:25px 0 20px;z-index:1;background:#bb88754d;clip-path:polygon(0 30%,19% 10%,40% 42%,66% 3%,100% 36%,100% 39%,66% 8%,40% 47%,19% 15%,0 35%)}
.pack-edition{position:absolute;left:4px;right:8px;bottom:24px;font-size:3px;line-height:4px;letter-spacing:.7px;color:#e3c9b2;text-align:center;z-index:2}
.pack-warning{position:absolute;left:3px;right:6px;bottom:5px;padding:2px 1px;background:#d6d3c4;color:#333d3c;font-size:3.4px;letter-spacing:0;line-height:4.5px;border:1px solid #353e3a;text-align:center;z-index:2}
.pack-batch{position:absolute;bottom:0;left:4px;right:7px;line-height:4px;font-size:2.3px;letter-spacing:.3px;color:#c9b19c;z-index:2;text-align:center}
.pack-front:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#2d3c3210 0 .3px,transparent .3px 2px);pointer-events:none;z-index:3;opacity:.5}
.pack-lid:before{content:'NORTH / 60°';position:absolute;bottom:4px;left:7px;font-size:4px;letter-spacing:.7px;color:#dfc5ad;transform:rotate(-2deg)}
/* Clear cellophane: a thin tear band, reflections, and a folding flap. */
.pack{--peel:0;--peel-pct:0%;--peel-pull:0px}
.pack-film{position:absolute;inset:-1px -1px -2px;z-index:5;pointer-events:none;border:1px solid #e9f1ef70;background:linear-gradient(112deg,transparent 0 15%,#f2f9f336 16%,transparent 20% 43%,#f2f9f31c 46%,transparent 53% 74%,#f2f9f34a 76%,transparent 79%),linear-gradient(45deg,transparent 85%,#edf6f544 86%,transparent 90%);clip-path:polygon(var(--peel-pct) 0,100% 0,100% 100%,var(--peel-pct) 100%)}
.pack-film:after{content:'';position:absolute;inset:2px 2px;border-bottom:3px double #eef7f455;clip-path:polygon(0 80%,50% 95%,100% 80%,100% 100%,0 100%)}
.film-flap{position:absolute;top:-1px;bottom:-2px;left:var(--peel-pct);width:calc(3px + var(--peel-pull)*.35);z-index:7;pointer-events:none;opacity:var(--peel);transform:skewY(-14deg) rotate(7deg);transform-origin:0 45%;background:linear-gradient(100deg,#f0f8f04d,#fcfff194 12%,#a2b4b024 40%,#e9f9ec70 72%,#9caeab22);border-left:1px solid #efffffc4;clip-path:polygon(0 0,75% 6%,100% 35%,79% 67%,100% 93%,0 100%);filter:drop-shadow(-1px 1px 1px #263b3d33)}
.pack-seal{display:none;top:19px;left:var(--peel-pct);right:0;height:3px;line-height:3px;background:#e3d8b0a8;border:0;transform:none;z-index:8;overflow:hidden;color:#514b3c;font-size:2px}
.pack-seal span{white-space:nowrap;letter-spacing:2px;opacity:.7}
.film-tab{display:none;position:absolute;right:-9px;top:16px;width:12px;height:10px;z-index:9;background:linear-gradient(130deg,#ecf6f560,#fbfffbb0 48%,#b8c8bd44);border:1px solid #e8eee891;clip-path:polygon(0 0,80% 10%,100% 55%,75% 100%,0 90%);color:#635c46;font-size:7px;line-height:8px;transform:translateX(var(--peel-pull));cursor:ew-resize}
body[data-ritual=packed] .film-tab,body[data-ritual=sealed] .film-tab{display:block}
.seal-broken .pack-film,.seal-broken .film-flap,.seal-broken .film-tab{display:none}
.film-released .film-flap,.film-released .film-tab{animation:film-release .33s ease-out forwards}
@keyframes film-release{to{translate:28px 25px;rotate:24deg;opacity:0}}
body[data-ritual=packed] .seal-broken .pack-seal{display:none}
@media(prefers-reduced-motion:reduce){.film-released .film-flap,.film-released .film-tab{animation:none;opacity:0}}
/* Keep the first ember in view before the preparation scene dissolves. */
#preparation{opacity:1;transition:opacity 1.1s ease}
#preparation::backdrop{transition:background 1.1s ease,backdrop-filter 1.1s ease}
#preparation.fading{opacity:0;pointer-events:none}
#preparation.fading::backdrop{background:#12232c00;backdrop-filter:blur(0)}
/* A shallow, faceted metal ashtray, with the ash kept in its bowl. */
#dropAsh{position:relative;display:block;width:86px;height:46px;margin:13px 0 8px;padding:0;border:0;background:none;color:#d2ddd8;opacity:1;filter:drop-shadow(2px 3px 2px #14222b66);--tray-fill:0}
#dropAsh[hidden]{display:none}#dropAsh:disabled{opacity:.65;cursor:default}
.ashtray-rim{position:absolute;inset:2px 0 9px;background:linear-gradient(165deg,#bdc6bf 0 28%,#788b90 28% 55%,#485d65 55% 80%,#92a4a4 80%);clip-path:polygon(12% 0,88% 0,100% 26%,100% 67%,86% 100%,12% 100%,0 69%,0 28%)}
.ashtray-bowl{position:absolute;left:9px;right:9px;top:8px;height:22px;background:linear-gradient(160deg,#354b52 0 35%,#5f7478 35% 70%,#839594 70%);clip-path:polygon(12% 0,88% 0,100% 27%,91% 91%,12% 100%,0 35%);box-shadow:inset 0 3px 2px #192d36}
.ashtray-rim:after{content:'';position:absolute;right:8px;top:0;width:15px;height:7px;background:#354b52;transform:rotate(20deg)}
.ashtray-pile{position:absolute;left:23px;top:15px;width:44px;height:11px;opacity:var(--tray-fill);background:repeating-conic-gradient(#777a6a 0 35deg,#b5b4a2 35deg 55deg,#595f58 55deg 90deg);background-size:5px 4px;clip-path:polygon(0 60%,10% 24%,25% 48%,40% 0,55% 35%,70% 10%,100% 55%,85% 95%,20% 100%)}
.ashtray-label{position:absolute;top:41px;left:0;right:0;font-size:9px;letter-spacing:0;text-align:center;text-shadow:1px 1px #162831}
#dropAsh.tapped .ashtray-rim{animation:tray-tap .24s ease-out}
@keyframes tray-tap{50%{translate:0 2px}}
.tray-ash{position:fixed;z-index:50;pointer-events:none;width:3px;height:3px;background:#a9aa9b;animation:into-tray .75s ease-in forwards}
@keyframes into-tray{0%{opacity:.9;transform:translate(0,-4px) rotate(0)}90%{opacity:.9}100%{opacity:0;transform:translate(var(--ash-dx),var(--ash-dy)) rotate(140deg)}}
@media(prefers-reduced-motion:reduce){#preparation,#preparation::backdrop{transition-duration:.15s}.tray-ash{display:none}}
/* Cheap pressed metal: rolled rim, dull chrome facets, and light scuffs. */
#dropAsh{width:146px;height:76px;margin:14px 0 10px;filter:drop-shadow(3px 5px 2px #14222b70)}
#dropAsh:disabled{opacity:1}
.ashtray-rim{inset:2px 0 12px;background:linear-gradient(174deg,#d5d6cc 0 8%,#828b8b 8% 13%,#e1e3d8 13% 19%,#9da5a2 19% 30%,#626c6d 30% 65%,#b7bdb7 65% 76%,#e2e4da 76% 81%,#727c7c 81% 91%,#b4bab5 91%);clip-path:polygon(13% 0,86% 0,100% 24%,100% 68%,86% 100%,12% 100%,0 70%,0 26%)}
.ashtray-bowl{left:12px;right:12px;top:12px;height:37px;background:linear-gradient(170deg,#596464 0 15%,#8a9491 15% 35%,#a6adaa 35% 60%,#747f7d 60% 85%,#c5cac0 85%);clip-path:polygon(13% 0,87% 0,100% 29%,90% 92%,12% 100%,0 34%);box-shadow:inset 0 4px 3px #2e3e4080}
.ashtray-bowl:after{content:'';position:absolute;inset:6px 10px;background:repeating-linear-gradient(172deg,transparent 0 5px,#e5e7dc40 5px 5.5px,transparent 5.5px 10px,#39484630 10px 10.6px);clip-path:polygon(10% 0,95% 10%,80% 100%,0 80%)}
.ashtray-rim:after{right:17px;top:0;width:19px;height:9px;background:linear-gradient(#454f50,#a3aaa4);transform:rotate(15deg);box-shadow:-80px 46px 0 #667372}
.ashtray-pile{left:38px;top:27px;width:65px;height:16px;z-index:1}
.ashtray-label{top:72px;font-size:9px;color:#d6ddd6}
body.over-ashtray .ashtray-rim{filter:brightness(1.17)}
body.over-ashtray .ashtray-label{color:#f3edcf}
@media(max-width:650px){#ritual:has(#dropAsh:not([hidden])){bottom:101px}}