:root{--ink:#52311b;--ink-soft:#8a6a52;--text:#5c4033;--paper:#f9ecd9;--paper-deep:#efdfc9;--note:#fffaf0;--cream:#f4dab8;--machine:#e2ac93;--gold-light:#fbe3ab;--gold:#e8c07f;--gold-deep:#9a6d3e;--wood:#e5ba93;--wood-deep:#835434;--red:#c9534a;--sage:#a9b09a;--shadow:#6e482d;--glow:#ffd678;--ink-rgb:82, 49, 27;--ink-soft-rgb:138, 106, 82;--text-rgb:92, 64, 51;--paper-rgb:249, 236, 217;--paper-deep-rgb:239, 223, 201;--note-rgb:255, 250, 240;--cream-rgb:244, 218, 184;--machine-rgb:226, 172, 147;--gold-light-rgb:251, 227, 171;--gold-rgb:232, 192, 127;--gold-deep-rgb:154, 109, 62;--wood-rgb:229, 186, 147;--wood-deep-rgb:131, 84, 52;--red-rgb:201, 83, 74;--sage-rgb:169, 176, 154;--shadow-rgb:110, 72, 45;--glow-rgb:255, 214, 120;--bg:var(--paper);--bg-deep:var(--paper-deep);--text-soft:var(--ink-soft);--accent:var(--sage);--body:var(--ink-soft);--body-dark:var(--ink-soft);--panel:var(--paper-deep);--plate:var(--note);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none;margin:0;font-family:-apple-system,PingFang TC,Noto Sans TC,Helvetica Neue,sans-serif}.app{max-width:480px;min-height:100dvh;padding:env(safe-area-inset-top) 16px 0;flex-direction:column;margin:0 auto;display:flex}.top{justify-content:space-between;align-items:center;padding:14px 0 4px;display:flex}.top h1{letter-spacing:.04em;margin:0;font-size:20px;font-weight:600}.proto-tag{color:var(--text-soft);background:var(--bg-deep);vertical-align:middle;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:500}.mute-btn{background:var(--bg-deep);color:var(--text-soft);border:none;border-radius:999px;padding:6px 12px;font-size:13px}.stage{flex-direction:column;flex:1;justify-content:center;align-items:center;padding:8px 0;display:flex;position:relative}.machine{-webkit-user-select:none;user-select:none;width:min(100%,340px,65.3846dvh - 163.462px);position:relative}.machine-svg{width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(var(--ink-soft-rgb), .18));display:block}.globe-canvas{aspect-ratio:1;pointer-events:none;position:absolute}.count-text{fill:var(--text);font-size:13px;font-weight:600}.knob{transition:opacity .2s}.knob-disabled{opacity:.6}.scene{-webkit-user-select:none;user-select:none;width:min(100% + 32px,600px,64.3519dvh - 128.704px);margin:0 -16px;position:relative}.layer{pointer-events:none;-webkit-user-drag:none;display:block;position:absolute}.knob-img{transition:opacity .2s}.char{transform-origin:50% 92%;animation:2.8s ease-in-out infinite breathe}.char-active{animation:none}.pose{-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.015,.985)}}.knob-hit{cursor:grab;touch-action:none;background:0 0;border:none;border-radius:50%;outline:none;padding:0;position:absolute}.knob-hit:focus-visible{box-shadow:0 0 0 3px var(--accent)}.trial-note{color:var(--text-soft);text-align:center;margin:0;font-size:12px}.dispensed-ball{box-shadow:0 0 0 0 rgba(var(--glow-rgb), .6);background:url(/assets/capsule.webp) 50%/contain no-repeat;border:none;border-radius:50%;padding:0;animation:.7s cubic-bezier(.2,.8,.3,1) both roll-out,1.6s ease-in-out .7s infinite glow;position:absolute}@keyframes roll-out{0%{opacity:0;transform:translate(-20%,-35%)scale(.6)rotate(0)}to{opacity:1;transform:translate(0)scale(1)rotate(200deg)}}@keyframes glow{0%,to{filter:drop-shadow(0 0 0 rgba(var(--glow-rgb), .7));transform:translate(0)scale(1)rotate(200deg)}50%{filter:drop-shadow(0 0 10px rgba(var(--glow-rgb), .9));transform:translateY(-6%)scale(1.06)rotate(200deg)}}.input-bar{background:var(--bg);padding:10px 0 calc(12px + env(safe-area-inset-bottom));flex-direction:column;gap:8px;display:flex;position:sticky;bottom:0}.input-meta{justify-content:space-between;align-items:center;gap:8px;display:flex}.author-toggle{gap:6px;display:flex}.pill{border:1px solid var(--body-dark);color:var(--text);background:0 0;border-radius:999px;padding:5px 14px;font-size:14px}.pill-on{background:var(--body);border-color:var(--body);color:#fff}.date-chip{color:var(--text-soft);align-items:center;gap:6px;font-size:13px;display:flex}.date-chip input{font:inherit;color:var(--text);background:var(--plate);border:none;border-radius:10px;padding:4px 8px;font-size:16px}.input-row{gap:8px;display:flex}.text-input{min-width:0;color:var(--text);background:#fff;border:none;border-radius:999px;outline:none;flex:1;padding:12px 16px;font-size:16px;box-shadow:inset 0 0 0 1px #0000000a}.text-input:focus{box-shadow:inset 0 0 0 2px var(--accent)}.send-btn{color:#fff;background:var(--accent);border:none;border-radius:999px;padding:0 20px;font-size:16px;font-weight:600}.send-btn:disabled{opacity:.45}.card-backdrop{background:rgba(var(--text-rgb), .35);justify-content:center;align-items:center;padding:24px;animation:.2s both fade;display:flex;position:fixed;inset:0}.card{background:var(--plate);text-align:center;width:min(100%,360px);box-shadow:0 18px 40px rgba(var(--text-rgb), .25);border-radius:24px;padding:28px 22px 22px;animation:.35s cubic-bezier(.2,.9,.3,1.2) both pop}.card-ball{width:44px;height:44px;filter:drop-shadow(0 0 8px rgba(var(--glow-rgb), .8));background:url(/assets/capsule.webp) 50%/contain no-repeat;margin:0 auto 12px}.card-badge{background:var(--cream);color:var(--gold-deep);border-radius:999px;margin:0 0 8px;padding:2px 10px;font-size:12px;display:inline-block}.card-meta{color:var(--text-soft);margin:0 0 12px;font-size:13px}.card-text{white-space:pre-wrap;word-break:break-word;margin:0 0 20px;font-size:17px;line-height:1.6}.card-btn{padding:10px 24px}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.85)}}@media (prefers-reduced-motion:reduce){.dispensed-ball,.char,.card,.card-backdrop{animation:none}}.fly{pointer-events:none;transition:left .55s cubic-bezier(.3,.6,.4,1),top .55s cubic-bezier(.5,0,.6,1);position:absolute}.fly-capsule{width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(var(--glow-rgb), .85))}.rolling{animation:.6s cubic-bezier(.2,.8,.3,1) both roll-out}.hopping{animation:.55s ease-in-out both hop}@keyframes hop{0%{transform:translateY(0)rotate(200deg)}50%{transform:translateY(-70%)rotate(320deg)}to{transform:translateY(0)rotate(420deg)}}.capsule-tap{background:radial-gradient(circle, rgba(var(--glow-rgb), .35), rgba(var(--glow-rgb), 0) 70%);border:none;border-radius:50%;padding:0;animation:1.4s ease-in-out infinite tap-glow;position:absolute}@keyframes tap-glow{0%,to{opacity:.5}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.fly{transition:none}.rolling,.hopping,.capsule-tap{animation:none}}.actor{will-change:transform}.actor-img{-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.held-capsule{filter:drop-shadow(0 0 8px rgba(var(--glow-rgb), .85));-webkit-user-drag:none;position:absolute}.fly-capsule{filter:drop-shadow(0 0 8px rgba(var(--glow-rgb), .85))}.scene-bg{-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 6% 94%,#0000 100%),linear-gradient(#0000 0,#000 8% 86%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 6% 94%,#0000 100%),linear-gradient(#0000 0,#000 8% 86%,#0000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.tap-anywhere{z-index:5;cursor:pointer;background:0 0;border:none;padding:0;position:absolute;inset:0}.card-backdrop{z-index:10}.poke-hit{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:45%;outline:none;padding:0;position:absolute}.poke-hit:focus-visible{outline:3px solid rgba(var(--ink-soft-rgb), .6)}.composer{z-index:7;background:var(--bg);padding:8px 0 calc(12px + env(safe-area-inset-bottom));flex-direction:column;gap:8px;display:flex;position:sticky;bottom:0}.composer-card{background:var(--note);box-shadow:0 6px 20px rgba(var(--text-rgb), .12), inset 0 0 0 1px rgba(var(--ink-soft-rgb), .12);border-radius:20px;flex-direction:column;gap:8px;padding:10px 12px 7px;animation:.22s cubic-bezier(.2,.9,.3,1.2) both composer-up;display:flex}@keyframes composer-up{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:none}}.composer-row{align-items:center;gap:10px;display:flex}.composer-label{width:3.2em;color:var(--text-soft);flex:none;font-size:13px}.author-pick,.chip-row{flex-wrap:wrap;align-items:center;gap:6px;min-width:0;display:flex}.author-chip{background:var(--bg-deep);color:var(--text);border:1.5px solid #0000;border-radius:999px;align-items:center;gap:6px;padding:3px 12px 3px 3px;font-size:14px;display:flex}.author-chip img{border-radius:50%;width:28px;height:28px}.author-chip-on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(var(--gold-rgb), .25);background:#fff}.chip{background:var(--bg-deep);color:var(--text);border:none;border-radius:999px;padding:6px 11px;font-size:14px;line-height:1.2;position:relative}.chip-on{background:var(--accent);color:#fff}.chip-date input{opacity:0;width:100%;position:absolute;inset:0}.photo-thumb{display:inline-block;position:relative}.photo-thumb img{object-fit:cover;border-radius:10px;width:44px;height:44px;display:block}.photo-thumb button{background:var(--text);color:#fff;border:none;border-radius:50%;width:20px;height:20px;padding:0;font-size:13px;line-height:20px;position:absolute;top:-6px;right:-6px}.place-input{background:var(--bg-deep);color:var(--text);border:none;border-radius:999px;outline:none;width:100%;padding:7px 14px;font-size:16px}.chip-gap{background:rgba(var(--ink-soft-rgb), .2);width:1px;height:18px;margin:0 2px}.me-btn{border:2px solid var(--gold);background:#fff;border-radius:50%;flex:none;width:44px;height:44px;padding:0;overflow:hidden}.me-btn img{width:100%;height:100%;display:block}.composer .trial-note{color:var(--text-soft);margin:0;font-size:11px}.card-photo{object-fit:cover;border-radius:14px;width:100%;max-height:40vh;margin:4px 0 8px}.card-place{color:var(--text-soft);margin:-4px 0 8px;font-size:13px}.scene-dim{pointer-events:none;opacity:0;background:radial-gradient(ellipse 75% 65% at 50% 45%, rgba(var(--ink-rgb), 0) 45%, rgba(var(--ink-rgb), .9) 100%);z-index:1;position:fixed;inset:0}.letter-layer{pointer-events:none;z-index:30;position:fixed;inset:0}.fly-letter{will-change:transform, opacity;font-family:Huninn,-apple-system,PingFang TC,sans-serif;font-size:18px;font-weight:600;transition:color .2s;position:fixed;top:0;left:0}.note{bottom:calc(10px + env(safe-area-inset-bottom));z-index:7;margin:8px 0 calc(10px + env(safe-area-inset-bottom));background-color:var(--note);border:2px solid var(--ink-soft);box-shadow:0 6px 18px rgba(var(--text-rgb), .14);color:var(--text);border-radius:14px;padding:7px 8px 7px 7px;font-family:Huninn,-apple-system,PingFang TC,sans-serif;position:sticky}.note-open{background-image:repeating-linear-gradient(transparent 0 31px, rgba(var(--ink-soft-rgb), .13) 31px 32px);background-position:0 47px;border-radius:6px 6px 18px 18px;padding:18px 14px 10px;animation:.26s cubic-bezier(.2,.9,.3,1.15) both note-up}@keyframes note-up{0%{opacity:.6;transform:translateY(14px)rotate(-.6deg)}to{opacity:1;transform:none}}.note-tape{opacity:.88;background:url(/assets/art/tape-cream.webp) 50%/100% 100% no-repeat;width:104px;height:16px;position:absolute;top:-11px;left:50%;transform:translate(-50%)rotate(-2deg)}.read-note .note-tape{background-image:url(/assets/art/tape-sage.webp)}.note-title{align-items:center;gap:6px;margin:0 0 6px;font-size:15px;display:flex}.note-title img{width:22px}.note-body{align-items:center;gap:8px;display:flex}.note-open .note-body{flex-direction:row-reverse;align-items:flex-start}.note-stamp{border:2px dashed var(--gold-deep);width:44px;height:44px;font:inherit;color:inherit;background:#fff;border-radius:50%;flex-direction:column;flex:none;align-items:center;padding:2px;display:flex}.note-stamp img{border-radius:50%;width:100%;height:100%;display:block}.note-open .note-stamp{width:58px;height:58px;margin-top:-40px;position:relative;transform:rotate(7deg)}.note-stamp span{white-space:nowrap;color:var(--ink-soft);font-size:11px;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)rotate(-7deg)}.note-text{resize:none;min-width:0;font:inherit;color:var(--text);background:0 0;border:none;outline:none;flex:1;padding:0 4px;font-size:17px;line-height:32px}.note-text::placeholder{color:var(--ink-soft)}.note-mini-send{background:linear-gradient(180deg, var(--gold-light), var(--gold));width:44px;height:44px;box-shadow:0 2px 0 var(--gold-deep), 0 0 12px rgba(var(--glow-rgb), .55);border:none;border-radius:50%;flex:none;padding:6px}.note-mini-send img{width:100%;display:block}.note-mini-send:disabled,.note-send:disabled{filter:grayscale(.6);opacity:.55;box-shadow:none}.note-tags{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.tag{font:inherit;color:var(--text);background:var(--paper-deep);border:1.5px solid var(--cream);border-radius:4px 12px 12px 4px;align-items:center;gap:4px;min-height:34px;padding:5px 11px 5px 9px;font-size:14px;display:inline-flex;position:relative}.tag-date{background:var(--note);border-color:var(--sage)}.tag-date input{font:inherit;color:var(--text);background:0 0;border:none;min-width:7.5em;padding:0;font-size:14px}.tag-quick{color:var(--ink-soft)}.tag-place input{font:inherit;width:7em;color:var(--text);background:0 0;border:none;outline:none;padding:0;font-size:16px}.tag-place input::placeholder{color:var(--ink-soft)}.tag-photo{padding:2px}.tag-photo img{object-fit:cover;border-radius:3px 10px 10px 3px;width:36px;height:36px;display:block}.tag-photo button{background:var(--text);color:#fff;border:none;border-radius:50%;width:20px;height:20px;padding:0;font-size:13px;line-height:20px;position:absolute;top:-7px;right:-7px}.visually-hidden{opacity:0;clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.note-send{width:100%;font:inherit;color:var(--text);text-shadow:0 1px 0 rgba(var(--gold-light-rgb), .8);background:linear-gradient(180deg, var(--gold-light), var(--gold));box-shadow:0 3px 0 var(--gold-deep), 0 0 18px rgba(var(--glow-rgb), .6);border:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;margin-top:12px;padding:12px;font-size:17px;display:flex}.note-send img{width:22px}.note-trial{color:var(--ink-soft);text-align:center;margin:8px 0 0;font-size:11px}.fold-stage{z-index:30;pointer-events:none;perspective:1100px;transform-origin:50%;transition:filter .3s;position:fixed}.fold-lifted{filter:drop-shadow(0 14px 18px rgba(var(--text-rgb), .28))}.fold-half{transform-style:preserve-3d;position:absolute}.fold-face{position:absolute;inset:0;overflow:hidden}.fold-face>.note{box-shadow:none;position:absolute}.fold-blank,.fold-back{background-color:var(--paper);background-image:repeating-linear-gradient(transparent 0 31px, rgba(var(--ink-soft-rgb), .06) 31px 32px), repeating-linear-gradient(37deg, rgba(var(--ink-soft-rgb), .05) 0 1px, transparent 1px 7px), repeating-linear-gradient(-53deg, #ffffff40 0 1px, transparent 1px 9px);border:2px solid var(--ink-soft);border-radius:6px;box-shadow:inset 0 0 0 4px #ffffff4d}.fold-shade{opacity:0;pointer-events:none;position:absolute;inset:0}.fold-shade-top{background:linear-gradient(180deg, rgba(var(--ink-rgb), .55), rgba(var(--ink-rgb), 0) 70%)}.fold-shade-left{background:linear-gradient(90deg, rgba(var(--ink-rgb), .55), rgba(var(--ink-rgb), 0) 70%)}.fold-cast{pointer-events:none;background:rgba(var(--ink-rgb), .5);filter:blur(6px);border-radius:6px;position:absolute}.fold-glint{pointer-events:none;background:linear-gradient(90deg, rgba(var(--note-rgb), 0), rgba(var(--gold-light-rgb), 1), rgba(var(--note-rgb), 0));box-shadow:0 0 10px rgba(var(--gold-light-rgb), .9);border-radius:2px;position:absolute}.fold-letter{background-color:var(--paper);background-image:linear-gradient(90deg, transparent calc(50% - .5px), rgba(var(--ink-soft-rgb), .18) 50%, transparent calc(50% + .5px)), linear-gradient(180deg, transparent calc(50% - .5px), rgba(var(--ink-soft-rgb), .18) 50%, transparent calc(50% + .5px)), repeating-linear-gradient(37deg, rgba(var(--ink-soft-rgb), .05) 0 1px, transparent 1px 7px);border:2px solid var(--ink-soft);box-shadow:2px 2px 0 -1px var(--paper-deep), 2px 2px 0 0 var(--ink-soft), 4px 4px 0 -1px var(--paper-deep), 4px 4px 0 0 var(--ink-soft), 0 10px 20px rgba(var(--text-rgb), .25), 0 0 24px rgba(var(--glow-rgb), .35);border-radius:6px;position:relative}.fold-wax{filter:drop-shadow(0 2px 3px rgba(var(--text-rgb), .3));background:url(/assets/art/wax.webp) 50%/contain no-repeat;position:absolute;top:50%;left:50%}.fold-paw,.fold-print{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.fold-paw svg{width:100%;height:100%;display:block}.fold-print{justify-content:center;align-items:center;display:flex}.fold-print img{width:62%;display:block}.fold-print{mix-blend-mode:multiply}.fold-spark{color:var(--gold);text-shadow:0 0 6px rgba(var(--glow-rgb), .9);pointer-events:none;font-size:14px;position:absolute;top:50%;left:50%}.read-backdrop{background:rgba(var(--text-rgb), .3);align-items:center;transition:background .35s;animation:.6s both read-tint}.app>*{transition:filter .6s}body.reading-focus .app>:not(.read-backdrop){filter:blur(7px)saturate(.85)}.read-backdrop.read-leaving{background:rgba(var(--text-rgb), 0)}@keyframes read-tint{0%{background:rgba(var(--text-rgb), 0)}}@media (prefers-reduced-motion:reduce){.read-backdrop,.app>*{transition:none;animation:none}}.read-note{width:min(100%,380px);box-shadow:0 18px 40px rgba(var(--ink-rgb), .38), 0 4px 10px rgba(var(--ink-rgb), .18);background-position:0 56px;margin:0;padding:22px 18px 16px;animation:none;position:relative;bottom:auto}.read-head{align-items:flex-start;min-height:54px;padding-right:64px;display:flex}.read-scroll{overscroll-behavior:contain;max-height:calc(100dvh - 220px);overflow-y:auto}.read-crease{pointer-events:none;background:linear-gradient(90deg, transparent calc(50% - .5px), rgba(var(--ink-soft-rgb), .16) 50%, transparent calc(50% + .5px)), linear-gradient(180deg, transparent calc(50% - .5px), rgba(var(--ink-soft-rgb), .16) 50%, transparent calc(50% + .5px));position:absolute;inset:0}.read-badge{color:var(--text);border-style:solid;border-width:0 10px;border-image:url(/assets/art/today-label.webp) 0 60 fill/0 10px;padding:4px;font-size:12px;position:absolute;top:-14px;left:16px}.read-avatar{width:54px;height:54px;box-shadow:0 0 0 2px var(--gold), 0 3px 8px rgba(var(--ink-rgb), .25);border:3px solid #fff;border-radius:50%;position:absolute;top:12px;right:12px;transform:rotate(8deg)}.read-post{color:var(--ink-soft);border:1.5px dashed var(--wood);border-radius:999px;align-items:center;gap:4px;margin:0;padding:4px 12px;font-size:13px;display:inline-flex}.read-dot{margin:0 2px}.read-text{white-space:pre-wrap;word-break:break-word;margin:0 0 10px;font-size:19px;line-height:32px}.read-polaroid{width:min(220px,70%);box-shadow:0 4px 10px rgba(var(--ink-rgb), .25);background:#fff;margin:6px 0 10px 6px;padding:8px 8px 26px;position:relative;transform:rotate(-3deg)}.read-polaroid img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}.read-polaroid:before{content:"";background:rgba(var(--sage-rgb), .75);width:64px;height:18px;position:absolute;top:-9px;left:50%;transform:translate(-50%)rotate(3deg)}.read-place{color:var(--ink-soft);background:var(--paper-deep);border:1.5px solid var(--cream);border-radius:4px 12px 12px 4px;gap:4px;margin:0;padding:4px 10px 4px 8px;font-size:13px;display:inline-flex}.read-actions{margin-top:6px}.open-capsule{z-index:31;pointer-events:none;position:fixed}.open-cap-half{background:url(/assets/capsule.webp) 0 0/100% 200% no-repeat;width:100%;height:50%;position:absolute;left:0}.open-cap-top{transform-origin:20% 100%;background-position:0 0;top:0}.open-cap-bottom{background-position:0 100%;top:50%}.open-cap-glow{background:radial-gradient(circle, rgba(var(--gold-light-rgb), .95) 0, rgba(var(--glow-rgb), .4) 40%, rgba(var(--glow-rgb), 0) 70%);border-radius:50%;position:absolute;inset:-40%}.note-busy{pointer-events:none;opacity:.55;transition:opacity .2s}.ball-pick{z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:50%;padding:0;position:absolute}.ball-pick:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.ball-pick-off{cursor:default}.ball-arrow{pointer-events:none;width:50%;filter:drop-shadow(0 0 6px rgba(var(--glow-rgb), .9));margin-left:-25%;transition:opacity .25s;animation:1.1s ease-in-out infinite arrow-bob;position:absolute;bottom:92%;left:50%}.ball-arrow img{width:100%;height:auto;display:block}.ball-pick-off .ball-arrow,.ball-pick-busy .ball-arrow{opacity:0}@keyframes arrow-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-22%)}}@media (prefers-reduced-motion:reduce){.ball-arrow{animation:none}}.book-entry{z-index:2;transform-origin:50% 80%;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;padding:0;position:absolute;rotate:9deg}.book-entry img{object-fit:contain;width:100%;height:100%;filter:drop-shadow(1px 5px 3px rgba(var(--shadow-rgb), .4));pointer-events:none;display:block}.book-entry:disabled{cursor:default}.book-entry:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.book-backdrop{z-index:10;background:rgba(var(--ink-rgb), .45);perspective:1200px}.book{border:3px solid var(--wood-deep);background:repeating-linear-gradient(180deg, transparent 0 31px, rgba(var(--gold-deep-rgb), .14) 31px 32px), var(--note);width:min(100%,400px);height:min(86vh,680px);box-shadow:inset 10px 0 0 var(--cream), inset 13px 0 0 var(--wood), 0 16px 34px rgba(var(--ink-rgb), .4);transform-origin:0;color:var(--text);border-radius:14px 18px 18px 14px;flex-direction:column;padding:18px 14px 12px;font-family:Huninn,-apple-system,PingFang TC,sans-serif;display:flex;position:relative}.book-ribbon{background:url(/assets/art/ribbon.webp) 50%/100% 100% no-repeat;width:11px;height:56px;position:absolute;top:-3px;right:34px}.book-head{align-items:baseline;gap:8px;padding-left:14px;display:flex}.book-head h2{margin:0;font-size:22px}.book-count{color:var(--ink-soft);font-size:13px}.book-close{color:var(--wood-deep);cursor:pointer;background:0 0;border:none;margin-left:auto;margin-right:30px;font-size:18px}.book-search{border:2px solid var(--cream);background:#fff;border-radius:999px;align-items:center;gap:6px;margin:12px 0 8px 14px;padding:8px 12px;display:flex}.book-search input{min-width:0;font:inherit;color:inherit;background:0 0;border:none;outline:none;flex:1;font-size:16px}.book-chips{flex-wrap:wrap;gap:5px;margin:0 0 8px 14px;display:flex}.book-chip{border:2px solid var(--cream);background:var(--note);font:inherit;color:var(--wood-deep);cursor:pointer;border-radius:999px;padding:4px 10px;font-size:13px}.book-chip-on{border-color:var(--gold-deep);background:linear-gradient(180deg, var(--gold-light), var(--gold));font-weight:700}.book-pages{-webkit-overflow-scrolling:touch;flex:1;margin-left:14px;padding-right:2px;overflow-y:auto}.book-year h3{z-index:1;background:var(--note);color:var(--gold-deep);margin:6px 0;padding:2px 0;font-size:15px;position:sticky;top:0}.book-year ul{margin:0;padding:0;list-style:none}.book-item{border:1.5px solid var(--cream);background:var(--note);width:100%;box-shadow:0 2px 0 var(--cream);font:inherit;text-align:left;color:inherit;cursor:pointer;border-radius:10px;align-items:center;gap:10px;margin-bottom:8px;padding:10px 10px 10px 8px;display:flex}.book-item:active{box-shadow:0 1px 0 var(--cream);transform:translateY(1px)}.book-date{text-align:center;width:46px;color:var(--ink-soft);flex:none;font-size:13px}.book-date b{color:var(--wood-deep);font-size:20px}.book-body{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.book-text{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;line-height:1.4;display:-webkit-box;overflow:hidden}.book-meta{min-width:0;color:var(--ink-soft);flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12px;display:flex}.book-meta img{border:1.5px solid var(--wood);background:#fff;border-radius:50%;width:24px;height:24px}.book-place{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.book-today{color:var(--gold-deep);flex:none;font-weight:700}.book-thumb{object-fit:cover;width:48px;height:48px;box-shadow:0 1px 4px rgba(var(--ink-rgb), .3);border:3px solid #fff;border-radius:4px;flex:none;transform:rotate(3deg)}.book-empty{color:var(--ink-soft);flex-direction:column;align-items:center;gap:8px;margin-top:40px;display:flex}.book-empty img{opacity:.8;width:72px}.read-from-book{z-index:11;background:rgba(var(--ink-rgb), .25)}.save-banner{z-index:20;border:2px solid var(--red);background:var(--note);width:min(100% - 24px,420px);box-shadow:0 6px 16px rgba(var(--ink-rgb), .25);color:var(--text);border-radius:12px;align-items:center;gap:10px;padding:10px 12px;font-size:14px;display:flex;position:fixed;top:10px;left:50%;transform:translate(-50%)}.save-banner button{background:var(--red);font:inherit;color:#fff;cursor:pointer;border:none;border-radius:999px;flex:none;margin-left:auto;padding:6px 12px;font-weight:700}.wardrobe-entry{z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% 4%;background:0 0;border:none;outline:none;padding:0;animation:4.2s ease-in-out infinite hanger-sway;position:absolute}.wardrobe-entry img{object-fit:contain;width:100%;height:100%;filter:drop-shadow(0 4px 3px rgba(var(--shadow-rgb), .25));pointer-events:none;display:block}.wardrobe-entry:disabled{cursor:default}.wardrobe-entry:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@keyframes hanger-sway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}@media (prefers-reduced-motion:reduce){.wardrobe-entry{animation:none}}.wardrobe-backdrop{z-index:10;background:rgba(var(--ink-rgb), .45)}.wardrobe{border:3px solid var(--wood-deep);background:var(--note);width:min(100%,400px);max-height:86vh;box-shadow:0 16px 34px rgba(var(--ink-rgb), .4);border-radius:18px;padding:16px 14px 18px;font-family:Huninn,-apple-system,PingFang TC,sans-serif;overflow-y:auto}:root{--grain:url(/assets/art/paper-tile.webp);--grain-size:256px}.note,.book-item,.book-year h3,.wardrobe,.login-card{background-image:var(--grain);background-size:var(--grain-size);background-blend-mode:multiply}.note-open{background-image:repeating-linear-gradient(transparent 0 31px, rgba(var(--ink-soft-rgb), .13) 31px 32px), var(--grain);background-size:auto, var(--grain-size);background-blend-mode:normal, multiply;background-position:0 47px,0 0}.read-note{background-position:0 56px,0 0}.book{background:repeating-linear-gradient(180deg, transparent 0 31px, rgba(var(--gold-deep-rgb), .14) 31px 32px), var(--grain) 0 0 / var(--grain-size), var(--note);background-blend-mode:normal, multiply}.fold-blank,.fold-back{background-image:repeating-linear-gradient(transparent 0 31px, rgba(var(--ink-soft-rgb), .06) 31px 32px), var(--grain);background-size:auto, var(--grain-size);background-blend-mode:normal, multiply}.fold-letter{background-image:linear-gradient(90deg, transparent calc(50% - .5px), rgba(var(--ink-soft-rgb), .18) 50%, transparent calc(50% + .5px)), linear-gradient(180deg, transparent calc(50% - .5px), rgba(var(--ink-soft-rgb), .18) 50%, transparent calc(50% + .5px)), var(--grain);background-size:auto, auto, var(--grain-size);background-blend-mode:normal, normal, multiply}.wardrobe-head{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.wardrobe-head h2{color:var(--text);margin:0;font-size:20px}.wardrobe-row h3{color:var(--wood-deep);margin:10px 2px 6px;font-size:15px}.wardrobe-row ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.wardrobe-item{border:2px solid var(--cream);width:100%;color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;font-size:13px;display:flex}.wardrobe-item img{aspect-ratio:1;object-fit:contain;pointer-events:none;width:100%}.wardrobe-item-on{border-color:var(--gold);background:var(--gold-light);box-shadow:0 0 0 2px rgba(var(--gold-rgb), .45)}.wardrobe-soon{color:var(--text-soft);grid-column:span 2;align-self:center;padding:8px;font-size:13px}.login{place-items:center;min-height:100dvh;padding:24px 16px;display:grid}.login-card{background:var(--note);width:min(100%,360px);box-shadow:0 6px 24px rgba(var(--ink-soft-rgb), .18);border-radius:18px;flex-direction:column;gap:12px;padding:24px 20px 20px;display:flex}.login-card h1{text-align:center;margin:0;font-size:22px}.login-faces{justify-content:center;gap:8px;display:flex}.login-faces img{background:var(--bg-deep);border-radius:50%;width:56px;height:56px}.login-hint{color:var(--text-soft);text-align:center;margin:0;font-size:13px}.login-card label{flex-direction:column;gap:4px;font-size:14px;display:flex}.login-card input{font:inherit;border:1.5px solid var(--panel);color:var(--text);background:#fff;border-radius:10px;padding:10px 12px;font-size:16px}.login-error{color:var(--red);text-align:center;margin:0;font-size:14px}.read-own{justify-content:center;gap:20px;margin-top:8px;display:flex}.read-link{font:inherit;color:var(--ink-soft);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;padding:6px 4px;font-size:14px;text-decoration:underline}.read-link:disabled{opacity:.5}.read-edit{flex-direction:column;gap:8px;display:flex}.read-edit-row{align-items:flex-start;gap:8px;min-height:54px;padding-right:64px;display:flex}.read-edit-row input{min-width:0;font:inherit;border:1.5px dashed var(--wood);color:var(--ink-soft);background:0 0;border-radius:999px;flex:1;padding:6px 10px;font-size:16px}.read-edit-text{font:inherit;outline:2px dashed rgba(var(--wood-rgb), .6);color:var(--text);resize:vertical;background:0 0;border:none;border-radius:6px;padding:0 4px;font-size:19px;line-height:32px}.read-edit-photo{flex-wrap:wrap;align-items:center;gap:4px 14px;display:flex}.read-cancel{align-self:center}.read-problem{color:var(--red);text-align:center;margin:0;font-size:14px}.read-confirm{background:var(--note);border:1.5px solid rgba(var(--red-rgb), .4);text-align:center;border-radius:12px;margin-top:10px;padding:12px}.read-confirm p{margin:0 0 8px}.read-confirm-actions{justify-content:center;gap:18px;display:flex}.read-danger{font:inherit;color:#fff;background:var(--red);border:none;border-radius:999px;padding:8px 20px;font-size:15px}.read-danger:disabled{opacity:.6}.read-edit-row input[type=date]{flex:0 0 9.5em}