[hidden]{display:none!important}
/* Layout: one phone-width column. The world (tube, cabinet, wall) is drawn in a cute
   outlined style; the slip that comes out of the drawer is realistic washi with red and gold. */
:root{
  --ground:#FBF3E6; --dot:#F1E2CB;
  --line:#6B4A36;
  --wood:#E8C597; --wood-2:#DDB27C; --wood-3:#F3DDB9;
  --shu:#E05A3E; --shu-2:#C9442B;
  --pink:#F6C7C4; --yellow:#F5E2A0; --blue:#CADDEE; --green:#D3E6C2;
  --ink:#3B2A20; --ink-2:#7A6352;
  --b-paper:#F6F0E2; --b-red:#7E1A17; --b-gold:#B08A3E; --b-ink:#3A2A22;
  --f-jp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-en:"Spectral",Georgia,serif;
  --f-round:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  color-scheme:light;
}
html,body{min-height:100%}
body{margin:0;background-color:var(--ground);color:var(--ink);font:16px/1.5 var(--f-round);
  background-image:radial-gradient(circle,var(--dot) 0 2px,transparent 2.5px);background-size:26px 26px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font-family:inherit;color:inherit}
:focus-visible{outline:3px solid var(--shu);outline-offset:3px}
.app{position:relative;z-index:1;max-width:440px;margin:0 auto;padding-inline:16px;padding-block:10px 48px;display:flex;flex-direction:column;gap:16px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mark{display:flex;align-items:baseline;gap:8px;background:none;border:0;padding:0;cursor:pointer;min-height:44px}
.mark b{font:900 24px/1 var(--f-round);color:var(--shu-2);letter-spacing:.04em;white-space:nowrap;text-shadow:0 0 6px #FFF8F0,0 0 3px #FFF8F0,0 0 1px #FFF8F0}
.mark span{text-shadow:0 0 5px #FFF8F0,0 0 2px #FFF8F0}
.mark span{font:700 12px/1 var(--f-round);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.top-actions{display:flex;gap:6px}
.pill{min-height:44px;padding:0 14px;border:2px solid #B9705A;border-radius:22px;background:#FDF4E6;color:#5A3A2A;font:700 14px/1 var(--f-round);cursor:pointer;white-space:nowrap;box-shadow:0 2px 0 rgba(185,112,90,.3)}
.pill[aria-pressed="false"]{border-style:dashed;color:var(--ink-2)}

/* shared bits */
.screen{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
/* speech: a washi strip tied at both ends with red cord */
.bubble{position:relative;background:#FDF4E6;border:2px solid #B9705A;border-radius:22px;padding:10px 24px;font:700 17px/1.4 var(--f-round);color:#5A3A2A;text-align:center;max-width:310px;margin:0 auto 4px;align-self:center;box-shadow:0 2px 0 rgba(185,112,90,.25),0 6px 14px rgba(120,70,50,.10)}
.bubble::before,.bubble::after{content:none}
.bubble::before{left:-11px}
.bubble::after{right:-11px}
.bubble b{color:var(--shu-2)}
.bubble{transition:opacity .45s ease}
.bubble.out{opacity:0}
.hint{font-size:15px;color:var(--ink-2);margin:0;max-width:32ch;text-shadow:0 0 6px #FFF8F0,0 0 2px #FFF8F0,0 0 1px #FFF8F0}
/* painted scenes (hand-painted art, 10/8) */
.scene{position:fixed;inset:0;z-index:0;background:var(--ground) 50% 0/cover no-repeat;pointer-events:none}
body[data-scene="tube"] .scene{background-image:url(art/bg-tube.webp)}
body[data-scene="plain"] .scene{background-image:url(art/bg-plain.webp)}
body[data-scene="wall"] .scene{background-image:url(art/bg-wall.webp)}
/* phones and other tall screens: the portrait plate so both cherry trees stay in view (10/8) */
@media (max-aspect-ratio:4/5){
  /* show the whole width of the tall plate (both trees and fences); a second copy anchored to the bottom carries the stone path down to the screen edge */
  body[data-scene="tube"] .scene{background:#F4E4D2 url(art/bg-tube-tall.webp) 50% 100%/100% auto no-repeat}
  body[data-scene="tube"] .scene::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:941/1672;background:url(art/bg-tube-tall.webp) 50% 0/100% auto no-repeat;-webkit-mask:linear-gradient(#000 93%,transparent 100%);mask:linear-gradient(#000 93%,transparent 100%)}
  body.on-stick[data-scene="tube"] .bubble{margin-top:var(--hang-clear-s,0px)}
  body[data-scene="tube"]:not(.on-stick) .bubble{margin-top:var(--hang-clear,0px);max-width:250px;font-size:16px;padding:9px 18px} /* speech sits under the lanterns and stays narrow so the fences show beside it */}
.itube{position:relative;width:150px;margin:0 auto;transform-origin:50% 100%}
.itube>img{display:block;width:100%;height:auto}
#tubeBtn .itube{translate:5.6% 0;transform-origin:44.4% 100%} /* the tassel sticks out on the right, so nudge the drawing until the tube body itself is centered (10/8) */
.go{min-height:54px;padding:0 34px;border:2.5px solid #C25A5C;border-radius:28px;background:linear-gradient(#F48C88,#EC7175);color:#fff;font:700 19px/1 var(--f-round);letter-spacing:.02em;cursor:pointer;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 #C25A5C;text-shadow:0 1px 0 rgba(150,60,60,.25)}
.go:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 1px 0 #C25A5C}
.go[disabled]{opacity:.45;cursor:default;box-shadow:none;transform:none}
.soft{min-height:48px;padding:0 24px;border:2px solid #B9705A;border-radius:24px;background:#FDF4E6;color:#5A3A2A;font:700 16px/1 var(--f-round);cursor:pointer;box-shadow:0 3px 0 rgba(185,112,90,.35)}
.rowb{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* the tube */
.tbtn{background:none;border:0;padding:12px 34px;cursor:pointer;border-radius:16px}
.ctube{position:relative;width:118px;height:220px;margin:0 auto;background:var(--wood-3);border:3px solid var(--line);border-radius:14px 14px 20px 20px;box-shadow:inset -12px 0 0 rgba(221,178,124,.55),inset 12px 0 0 rgba(255,255,255,.35),0 8px 0 -2px rgba(107,74,54,.25)}
.ctube::before,.ctube::after{content:"";position:absolute;top:10px;bottom:10px;width:0;border-left:2px solid rgba(107,74,54,.25)}
.ctube::before{left:28%}.ctube::after{right:28%}
.ctube .rim{position:absolute;left:-6px;right:-6px;top:-14px;height:26px;border-radius:50%;background:var(--wood-2);border:3px solid var(--line)}
.ctube .rim::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:9px;margin:-4.5px 0 0 -11px;border-radius:50%;background:var(--line)}
.ctube .band{position:absolute;left:-3px;right:-3px;height:14px;background:var(--shu);border:3px solid var(--line)}
.ctube .band.b1{top:30px}.ctube .band.b2{bottom:24px}
.ctube .label{position:absolute;left:50%;top:62px;transform:translateX(-50%);writing-mode:vertical-rl;background:#fff;border:2.5px solid var(--line);border-radius:6px;padding:9px 5px;font:900 19px/1 var(--f-round);letter-spacing:.14em;color:var(--shu-2);z-index:1}
.ctube .cord{position:absolute;right:-16px;top:40px;width:3px;height:56px;background:var(--shu-2);border-radius:2px;transform:rotate(-6deg);transform-origin:top}
.ctube .cord::after{content:"";position:absolute;left:-5px;bottom:-12px;width:13px;height:16px;border-radius:3px 3px 8px 8px;background:var(--yellow);border:2px solid var(--line)}
@keyframes rattle{0%{transform:rotate(0)}20%{transform:rotate(-14deg) translateY(-8px)}45%{transform:rotate(12deg) translateY(4px)}70%{transform:rotate(-6deg)}100%{transform:rotate(0)}}
.shaking{animation:rattle .34s ease-out}
.dots{display:flex;gap:10px;justify-content:center}
.dots i{width:14px;height:14px;border-radius:50%;border:2.5px solid var(--line);background:#fff}
.dots i.on{background:var(--shu)}
@keyframes sway{50%{transform:rotate(4deg)}}
/* lanterns hang from branches painted in bg-tube; JS puts each cord top on a branch */
.tlant{--lw:46px;--cord:0px;position:absolute;left:0;top:0;width:var(--lw);margin-left:calc(var(--lw) / -2);display:none;transform-origin:50% 0;animation:lanternSway 3.4s ease-in-out infinite}
body[data-scene="tube"] .tlant.on{display:block}
.tlant img{position:absolute;left:0;top:calc(var(--cord) - var(--lw) * .3);width:var(--lw);height:auto;display:block} /* the lantern's own top ring sits at the end of the cord (or right on the branch when there is no cord) */
.tlant .cord{position:absolute;left:50%;top:0;width:2px;margin-left:-1px;height:var(--cord);background:#6E4A33;border-radius:1px}
#lantR{animation-delay:-1.7s}
@keyframes lanternSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} /* own name: "hang" is already the knot drop-in */
@media (prefers-reduced-motion: reduce){.tlant{animation:none}}

/* the stick */
.stickstage{position:relative;height:250px;width:100%;pointer-events:none}
.stickstage .itube{position:absolute;left:50%;top:30px;margin-left:-132px;transform:rotate(100deg) scale(.8);transform-origin:50% 50%}
.cstick{position:absolute;left:50%;top:14px;width:40px;height:202px;margin-left:66px;background:url(art/stick.webp) center/100% 100% no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding-top:40px;box-sizing:border-box;transform:rotate(-8deg);filter:drop-shadow(0 6px 4px rgba(107,74,54,.2))}
.cstick span{white-space:pre-line;text-align:center;font:900 16px/1.08 var(--f-round);color:#5A3A2A}
.cstick em{order:-1;font:700 13px/1 var(--f-round);font-style:normal;color:#5A3A2A;background:#FDF4E6;border:2px solid #B9845A;border-radius:5px;padding:3px 4px}
@keyframes drop{0%{transform:translate(-110px,40px) rotate(-70deg) scale(.6);opacity:0}25%{opacity:1}65%{transform:translate(6px,8px) rotate(-4deg)}82%{transform:translate(0,0) rotate(-14deg)}100%{transform:rotate(-10deg)}}
.cstick.falling{animation:drop .8s cubic-bezier(.4,.1,.6,1) both}

/* the cabinet: all 100 drawers, then the view zooms to yours */
.vp{position:relative;width:100%;aspect-ratio:1/1.08;overflow:hidden;border-radius:18px;border:3px solid var(--line);background:var(--ground);background-image:radial-gradient(circle,var(--dot) 0 2px,transparent 2.5px);background-size:26px 26px}
.cab{position:absolute;left:0;top:0;width:100%;padding:8px 8% 0;box-sizing:border-box;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.45,.05,.2,1)}
.cab .roof{display:block;width:110%;margin:0 -5%;height:auto}
.cab .sign{display:block;width:max-content;margin:-7px auto 0;background:#fff;border:2.5px solid var(--line);border-radius:7px;padding:3px 12px;font:900 14px/1 var(--f-round);letter-spacing:.2em;position:relative;z-index:1}
.cab .body{background:var(--wood);border:3px solid var(--line);border-radius:10px;padding:7px;margin-top:-5px;box-shadow:inset 0 -5px 0 var(--wood-2)}
.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.drawer{position:relative;aspect-ratio:1/1.05;background:var(--wood-3);border:1.5px solid var(--line);border-radius:3px;display:flex;align-items:flex-end;justify-content:center;padding:0 0 2px;font:700 7px/1 var(--f-round);color:var(--ink)}
.drawer .roll{position:absolute;top:2px;left:50%;width:58%;height:30%;margin-left:-29%;border:1.2px solid var(--line);border-radius:99px 99px 2px 2px;background:var(--c,var(--pink))}
.drawer .plate{background:#fff;border:1px solid var(--line);border-radius:2px;min-width:9px;padding:1px 1px;text-align:center;font-variant-numeric:tabular-nums}
button.drawer{cursor:pointer;z-index:2}
button.drawer::before{content:"";position:absolute;inset:-3px}
button.drawer.target{animation:glow 1.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 2.5px rgba(224,90,62,.6)}}
button.drawer.open{animation:none;transform:translateY(2px) scale(1.25);z-index:3;box-shadow:0 4px 0 -1px var(--line);transition:transform .35s cubic-bezier(.2,.8,.3,1.3)}
button.drawer.open .roll{transform:translateY(-12px) rotate(-8deg);transition:transform .45s .15s cubic-bezier(.2,.8,.3,1.3)}
.cab .base{height:14px;margin:0 -6px;background:var(--wood-2);border:3px solid var(--line);border-top:0;border-radius:0 0 10px 10px}

/* the slip sheet */
.veil{position:fixed;inset:0;background:rgba(59,42,32,.55);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:44px 16px 40px;z-index:10}
.veil[hidden]{display:none}
.slipbox{width:100%;max-width:390px;display:flex;flex-direction:column;align-items:center;gap:14px}
@keyframes unroll{from{clip-path:inset(0 0 96% 0);transform:translateY(20px)}to{clip-path:inset(0 0 0 0);transform:none}}
.b.unrolling{animation:unroll 1s cubic-bezier(.3,.7,.2,1) both}
@keyframes tie{0%{transform:none}45%{transform:scale(.2,.6) rotate(4deg)}100%{transform:translateY(60vh) scale(.06,.2) rotate(18deg);opacity:0}}
.b.tying{animation:tie .85s cubic-bezier(.5,0,.7,1) both;transform-origin:50% 25%}
.tied-on{flex-basis:100%;margin:0 0 2px;text-align:center;color:#FDF4E6;font:700 14px/1.4 var(--f-round);letter-spacing:.02em;} .tied-on span{display:inline-block;padding:3px 14px;border-radius:999px;background:rgba(59,42,32,.6)} /* own line above the button, not squeezed beside it */

/* the wall */
.wframe{container-type:inline-size;position:relative;width:100%;aspect-ratio:800/879;background:url(art/wall.webp) center/100% 100% no-repeat}
.wframe .roof{display:block;width:108%;margin:0 -4%;height:auto}
.wframe .beam{height:16px;margin:-10px 4px 0;background:var(--wood-2);border:3px solid var(--line);border-radius:6px;position:relative;z-index:1}
.wframe .post{position:absolute;top:44px;bottom:0;width:18px;background:var(--wood);border:3px solid var(--line);border-radius:6px}
.wframe .post.l{left:8px}.wframe .post.r{right:8px}
.ropes{position:absolute;left:17%;right:17%;top:0;bottom:0}
.rope{position:absolute;left:0;right:0;height:8px;margin-top:-4px;border-radius:5px}
.knot{position:absolute;top:-3.6cqw;width:14.5cqw;height:15.6cqw;margin-left:-7.25cqw;transform:rotate(var(--r,0deg));pointer-events:none;background:url(art/knot.webp) center/100% 100% no-repeat}
.knot i{display:none!important}
.knot i{position:absolute;left:50%;background:#fff;border:2px solid var(--line)}
.knot .t1{top:-14px;width:10px;height:17px;margin-left:-5px;border-radius:3px 3px 1px 1px}
.knot .k{top:7px;width:22px;height:14px;margin-left:-11px;border-radius:7px;z-index:1}
.knot .t2{top:19px;width:10px;height:22px;margin-left:-4px;border-radius:1px 1px 3px 3px;transform:rotate(6deg)}
.knot.tone1 i{background:#FFFFFF}.knot.tone2 i{background:#FFF3C4}.knot.tone3 i{background:#FBE0E4}
button.knot{pointer-events:auto;background:url(art/knot.webp) center/100% 100% no-repeat;border:0;padding:0;cursor:pointer}
button.knot .t1{top:-10px}button.knot .k{top:11px}button.knot .t2{top:23px}
/* your own slips glow softly; the bow sits on ::before so the glow keeps running while the knot itself sways or drops in */
button.knot{background:none}
button.knot::before{content:"";position:absolute;inset:0;background:url(art/knot.webp) center/100% 100% no-repeat;animation:mineGlow 2.6s ease-in-out infinite}
@keyframes mineGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(255,205,95,.9)) drop-shadow(0 0 2px rgba(255,240,190,1))}50%{filter:drop-shadow(0 0 11px rgba(255,196,70,1)) drop-shadow(0 0 4px rgba(255,236,170,1)) drop-shadow(0 0 1.5px #fff)}}
@media (prefers-reduced-motion: reduce){button.knot::before{animation:none;filter:drop-shadow(0 0 7px rgba(255,200,85,.95)) drop-shadow(0 0 2px rgba(255,240,190,1))}}
.knot.ghost i{border-style:dashed;border-color:var(--shu-2)}
@keyframes bob{50%{transform:translateY(-3px) rotate(var(--r,0deg))}}
.knot.ghost{animation:bob 1.2s ease-in-out infinite;z-index:2}
@keyframes hang{from{transform:translateY(-70px) rotate(-20deg);opacity:0}to{transform:rotate(var(--r,0deg));opacity:1}}
.knot.new{animation:hang .7s cubic-bezier(.2,.8,.3,1.3) both}
.rope-hit{position:absolute;left:-10px;right:-10px;top:-20px;height:56px;background:none;border:0;padding:0;cursor:crosshair;z-index:3;border-radius:10px}
.rope-hit:focus-visible{outline:none}
.rope{transition:border-color .15s,box-shadow .15s}
.rope.hot{background:rgba(224,90,62,.25);box-shadow:0 0 0 3px rgba(224,90,62,.3)}
.rope.hot::before,.rope.hot::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-7px;border:7px solid transparent}
.rope.hot::before{left:-26px;border-left-color:var(--shu-2)}
.rope.hot::after{right:-26px;border-right-color:var(--shu-2)}
.knot.hover{z-index:1;opacity:.45}
.knot.ghost{opacity:.7;filter:drop-shadow(0 0 3px rgba(224,90,62,.95))}
.knot.hover i{background:transparent;border-style:dotted;border-color:var(--shu-2)}
.picking button.knot{pointer-events:none}
.wstatus{min-height:1.4em;margin:0;font:700 15px/1.4 var(--f-round);color:#5A3A2A}
.wstatus:not(:empty){background:rgba(253,244,230,.94);border:1.5px solid #E2C9B0;border-radius:14px;padding:8px 16px;box-shadow:0 2px 8px rgba(120,70,50,.10)} /* readable over the busy garden */
.wside{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.wside-head{display:none}
.mine{width:100%;text-align:left;display:flex;flex-direction:column;gap:8px}
.mine h3{margin:0;font:900 15px/1 var(--f-round);letter-spacing:.08em}
.mine ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mine li button{width:100%;min-height:50px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 14px;background:#fff;border:2.5px solid var(--line);border-radius:12px;cursor:pointer;text-align:left}
.mine li b{font:700 17px/1 var(--f-jp)}
.mine li span{font-size:14px;color:var(--ink-2)}

/* photo dialog */
dialog{border:3px solid var(--line);border-radius:18px;padding:16px;background:#fff;color:var(--ink);max-width:min(92vw,400px)}
dialog::backdrop{background:rgba(59,42,32,.6)}
dialog img{display:block;width:100%;max-height:62vh;object-fit:contain;border-radius:6px}
dialog p{margin:10px 0 0;font-size:15px;color:var(--ink-2)}

/* ending: a gust across the wall, then a closing line under the bubble */
.closing{text-align:center;margin:-4px auto 0;max-width:340px;padding:8px 18px;border-radius:18px;background:rgba(253,244,230,.88);box-shadow:0 2px 10px rgba(120,70,50,.12);animation:fadein .7s ease-out both}
.closing p{margin:0}
.closing .big{font:900 18px/1.35 var(--f-round);color:var(--ink)}
.closing .small{font:500 15px/1.4 var(--f-round);color:var(--ink-2);margin-top:2px}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wframe{overflow:hidden}
.knot{transform-origin:50% 30%}
@keyframes gust{0%{transform:rotate(var(--r,0deg))}25%{transform:rotate(calc(var(--r,0deg) + 16deg))}55%{transform:rotate(calc(var(--r,0deg) - 9deg))}80%{transform:rotate(calc(var(--r,0deg) + 4deg))}100%{transform:rotate(var(--r,0deg))}}
.gusting .knot{animation:gust 1.4s ease-in-out both;animation-delay:var(--d,0s)}
.gpetal{position:absolute;left:-20px;width:14px;height:12px;pointer-events:none;z-index:4}
.gpetal svg{display:block;width:14px;height:12px}
@keyframes blow{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(520px,50px) rotate(420deg);opacity:0}}
.gpetal.fly{animation:blow 2.2s ease-in both}
.petal svg,.gpetal svg{display:block;width:100%;height:100%}

/* petals */
.petal{position:fixed;top:-20px;width:14px;height:12px;pointer-events:none;z-index:0;animation:fall linear infinite}
@keyframes fall{0%{transform:translate(0,-20px) rotate(0)}100%{transform:translate(60px,110vh) rotate(540deg)}}



/* ---------- phone tuning (10/8) ---------- */
@media (max-width:419px){.mark span{display:none}}
@media not ((min-width:900px) and (min-height:560px)){.stickstage .itube{margin-left:-122px}.cstick{margin-left:40px}} /* phones: tube and stick closer so the pair can be drawn bigger */
@media (max-width:899px) and (min-height:740px){
  #s-tube{margin-top:3svh}
  #tubeBtn .itube{width:180px}
}

/* ---------- computer: the scene fills the screen (10/8) ---------- */
@media (min-width:900px) and (min-height:560px){
  .app{max-width:none;padding-inline:clamp(24px,3vw,48px);padding-block:14px 40px;gap:clamp(14px,2.2vh,24px)}
  .top{width:100%}
  .mark b{font-size:28px}
  .pill{min-height:46px;padding:0 18px;font-size:15px}
  .bubble{font-size:20px;max-width:440px;padding:12px 30px}
  .closing{max-width:460px}
  .closing .big{font-size:21px}.closing .small{font-size:16px}
  .hint{font-size:16px}
  .go{min-height:60px;padding:0 42px;font-size:21px;border-radius:30px}
  .soft{min-height:52px;padding:0 28px;font-size:17px}
  /* tube page: a bigger tube standing on the path */
  #s-tube{margin-top:4vh}
  #tubeBtn .itube{width:clamp(170px,27vh,260px)}
  /* the stick: same drawing, scaled up */
  .stickstage{transform:scale(1.55);transform-origin:50% 0;margin:2vh 0 calc(250px*.55 + 2vh)}
  /* cabinet: fills most of the height */
  #s-cab .vp{width:min(640px,64vh);margin:0 auto}
  /* slip: a little wider */
  .slipbox{max-width:460px}
  .veil{padding-top:56px}
  /* wall: big wall on the left, your slips and buttons on the right */
  #s-wall{display:grid;grid-template-columns:auto 360px;align-items:center;justify-content:center;column-gap:clamp(32px,5vw,80px);text-align:left}
  #s-wall .wframe{width:min(640px,calc(74vh*800/879))}
  /* right side: one card that holds everything about your slips */
  #s-wall .wside{align-items:stretch;gap:16px;padding:22px 24px 24px;background:rgba(253,244,230,.94);border:2px solid #D9B99C;border-radius:24px;box-shadow:0 4px 0 rgba(185,112,90,.22),0 18px 40px -18px rgba(90,50,30,.35)}
  #s-wall .wside-head{display:flex;align-items:baseline;gap:12px;padding-bottom:14px;border-bottom:1.5px dashed #D9B99C}
  #s-wall .wside-head b{font:900 26px/1 var(--f-jp);color:var(--shu-2);letter-spacing:.06em}
  #s-wall .wside-head span{font:700 13px/1 var(--f-round);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
  #s-wall .wstatus:not(:empty){background:none;border:0;box-shadow:none;padding:0;font-size:16px}
  #s-wall .wstatus:empty{display:none}
  #s-wall #pickBar{justify-content:flex-start}
  #s-wall .mine h3{font-size:16px}
  #s-wall .mine li button{min-height:56px}
  #s-wall .mine li b{font-size:19px}
  #s-wall .mine .hint{max-width:none;text-shadow:none}
  #s-wall #wallHome{align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- B: washi and gold ---------- */
.b{position:relative;background:var(--b-paper);color:var(--b-ink);padding:12px;box-shadow:0 14px 30px -18px rgba(60,30,10,.55);
  background-image:radial-gradient(circle,rgba(150,120,70,.10) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.6px);
  background-size:9px 11px,13px 7px;margin-top:26px}
.b .frame{border:1.5px solid var(--b-gold);outline:1px solid var(--b-gold);outline-offset:-6px;padding:0 0 18px;display:flex;flex-direction:column;gap:14px}
.b .band{height:78px;position:relative;overflow:hidden;background:var(--b-red)}
.b .band svg{position:absolute;inset:0;width:100%;height:100%}
.b .band.bottom{height:40px}
.b .dia{width:150px;height:150px;margin:-70px auto 0;transform:rotate(45deg);background:var(--b-paper);border:2px solid var(--b-gold);outline:1px solid var(--b-gold);outline-offset:4px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.b .dia > div{transform:rotate(-45deg);text-align:center}
.b .dia small{display:block;font:700 13px/1 var(--f-jp);color:var(--b-gold);letter-spacing:.2em;margin-bottom:6px}
.b .dia b{display:block;font:900 50px/1 var(--f-jp);color:var(--b-red);letter-spacing:.06em}
.b .lv-en{text-align:center;font:italic 18px/1 var(--f-en);margin-top:44px}
.b .pad{padding:0 20px;display:flex;flex-direction:column;gap:14px}
.b .waka{font:400 21px/1.9 var(--f-jp);color:var(--b-red)}
.b .credit{text-align:center;font-size:13px;color:#6E5A48;margin:0}
.b .orn{display:flex;align-items:center;gap:10px;color:var(--b-gold)}
.b .orn::before,.b .orn::after{content:"";flex:1;border-top:1px solid var(--b-gold)}
.b .orn i{width:7px;height:7px;transform:rotate(45deg);background:var(--b-gold)}
.b .lbl{font:700 14px/1 var(--f-jp);letter-spacing:.3em;color:var(--b-red);margin:0 0 6px;text-align:center}
.b .meaning{margin:0;font-size:16px}
.b .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.b .cell{border:1px solid rgba(176,138,62,.55);padding:8px 9px;background:rgba(255,255,255,.35)}
.b .cell .j{font:700 15px/1.2 var(--f-jp);color:var(--b-red)}
.b .cell .e{font:500 11px/1.2 var(--f-en);letter-spacing:.1em;text-transform:uppercase;color:#6E5A48;margin-left:4px}
.b .cell p{margin:3px 0 0;font-size:14px;line-height:1.35}
.b .cell.wide{grid-column:1/-1}
.b .remedy{border:1.5px solid var(--b-red);padding:12px;text-align:center}
.b .remedy p{margin:0}
.b .cord{position:absolute;top:-26px;left:50%;width:2px;height:40px;background:var(--b-red);margin-left:-1px}
.b .cord::before{content:"";position:absolute;top:-6px;left:-5px;width:12px;height:12px;border:2px solid var(--b-red);border-radius:50%}
.b .tassel{position:absolute;top:-30px;left:calc(50% + 14px);width:16px;height:46px;background:repeating-linear-gradient(90deg,#C9A65A 0 1.5px,#A8843C 1.5px 3px);border-radius:3px 3px 6px 6px;transform:rotate(8deg);transform-origin:top center}
.b .tassel::before{content:"";position:absolute;top:-6px;left:2px;width:12px;height:8px;background:var(--b-red);border-radius:3px}



.b{width:100%;box-sizing:border-box}
.b .lbl small{display:block;font:500 11px/1.2 var(--f-en);letter-spacing:.16em;text-transform:uppercase;color:#6E5A48;margin-top:4px}
.waka{writing-mode:vertical-rl;margin:0 auto;letter-spacing:.08em}
.waka span{display:block}
.waka span:nth-child(even){padding-block-start:1.3em}