:root{font-family:'DM Sans',sans-serif;color:#e6e8ed;background:#03070d;font-synthesis:none;color-scheme:dark;--muted:#98a7bd;--line:#ffffff16;--paper:#efe9dc;--ink:#252c3e}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,textarea{font:inherit}button{cursor:pointer;color:inherit;border:0;background:transparent;touch-action:manipulation}button:disabled{opacity:.28;cursor:default}a{color:inherit}[hidden]{display:none!important}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;flex:none}.symbols,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #a8bedb;outline-offset:3px}input:focus-visible,textarea:focus-visible{outline:1px solid #8da4c3;outline-offset:2px}#space{position:fixed;inset:0;pointer-events:none}#space canvas{width:100%;height:100%;display:block}.presence-bar{position:fixed;top:35px;right:32px;display:flex;align-items:center;gap:9px;font-size:11px;color:#a7b3c5;z-index:4}#avatars{display:flex;padding-left:5px}.avatar{display:grid;place-items:center;margin-left:-5px;width:25px;height:25px;border:2px solid #091320;border-radius:50%;color:#101b2d;font-size:10px;font-weight:600}.connection{display:inline-flex;align-items:center;gap:5px;padding-left:12px;border-left:1px solid var(--line);font-size:10px}.connection:before{content:'';width:5px;height:5px;border-radius:50%;background:#d6b879}.connection.live:before{background:#9dbfae}.connection.error{color:#e0b5a8}#workspace{position:fixed;inset:0;pointer-events:none;z-index:1}#paper{position:fixed;left:0;top:0;width:1200px;height:840px;transform-origin:0 0;pointer-events:auto;background:var(--paper);color:var(--ink);border-radius:1px 3px 3px 1px;isolation:isolate;touch-action:none;overflow:hidden;--scale:1}#paper:focus-visible{outline:2px solid #a8bedb;outline-offset:8px}.paper-grain{position:absolute;inset:0;pointer-events:none;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.13' filter='url(%23n)'/%3E%3C/svg%3E");z-index:-1}/* The page curves down into the binding on the left and catches a little light across its face. */
.paper-face:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#3d352638 0,#5b503920 1.4%,#8a7d5f0c 4.5%,transparent 9%,transparent 96%,#ffffff2e 100%),linear-gradient(180deg,#ffffff18,transparent 5%,transparent 95%,#0000000a),radial-gradient(ellipse 70% 60% at 62% 38%,#ffffff1c,transparent 70%);box-shadow:inset 1px 0 6px #67675312;z-index:4}.paper-heading{position:absolute;top:4.7%;left:5%;font-size:calc(14px * var(--scale));letter-spacing:.08em;color:#62645c;pointer-events:none}.paper-folio{position:absolute;bottom:4%;right:4.5%;font-size:calc(16px * var(--scale));font-variant-numeric:tabular-nums;color:#62645c;pointer-events:none}#entries,#cursors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#entries{z-index:2}#cursors{z-index:5}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:min(60px,calc(12px * var(--inv,1)));pointer-events:none}#empty>span{font-family:Caveat,cursive;font-size:calc(60px * var(--scale));line-height:1.06;transform:rotate(-5deg);color:#62645c;text-align:center}#empty button{pointer-events:auto;font-size:min(56px,calc(15px * var(--inv,1)));min-height:min(170px,calc(44px * var(--inv,1)));padding:0 calc(12px * var(--inv,1));color:#565b52}#empty button span{margin-left:10px}.entry{position:absolute;pointer-events:auto;transform-origin:center;user-select:none;-webkit-user-select:none;outline:none;line-height:1.2;touch-action:none;overflow-wrap:anywhere}.entry.owned{cursor:pointer}.entry.draft{cursor:grab}.entry.dragging{cursor:grabbing;z-index:7!important}.entry:focus-visible:before{content:'';position:absolute;inset:-10px;border:2px solid #526890;border-radius:3px}.entry .message{white-space:pre-wrap}.entry .signoff{margin-top:.48em;font-size:.72em;line-height:1.2;opacity:.85}.entry .signoff,.entry .entry-links,.cursor span,.identity-chip strong{unicode-bidi:isolate}.entry .entry-links{font-family:'DM Sans',sans-serif;font-size:calc(13px * var(--scale));margin-top:.48em;line-height:1.5;opacity:.68;display:flex;flex-wrap:wrap;gap:8px}.entry a{text-decoration:none;pointer-events:auto;cursor:pointer}.entry a:hover{text-decoration:underline}.entry.sticker img{width:100%;height:auto;display:block;pointer-events:none;filter:drop-shadow(1px 3px 2px #2833402c)}.entry.sticker .entry-links{display:none}.entry.ink svg{width:100%;height:100%;display:block;stroke-linecap:round;stroke-linejoin:round}@keyframes paste{0%{opacity:0;filter:drop-shadow(12px 20px 8px #1118);scale:1.3;translate:14px -30px;rotate:12deg}55%{opacity:1;scale:1.02;translate:0 -6px;rotate:-3deg}82%{scale:.98;translate:0 0;rotate:1deg}100%{scale:1;translate:0 0;rotate:0deg}}.cursor{position:absolute;color:#798dcc;transition:left 1s linear,top 1s linear;font-size:10px;white-space:nowrap;transform:scale(var(--inv,1));transform-origin:0 0}.cursor:before{content:'↖';font-size:23px}.cursor span{background:#243046;color:#f4f3ed;padding:3px 6px;border-radius:5px}.bottom-bar{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:20px;align-items:center;z-index:6;transition:left .3s}.tools,.page-nav{display:flex;align-items:center;border:1px solid var(--line);background:#0a1425de;backdrop-filter:blur(20px);border-radius:30px;padding:5px}.tools{gap:2px}.tools>button{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:23px;font-size:13px;color:#bec9d9}.tools>button:hover,.tools>button[aria-pressed=true]{background:#dce2e911;color:#f3f3ec}.tools svg{width:17px;height:17px}.icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex:none}.icon:hover:enabled{background:#ffffff0c}.icon svg{width:18px;height:18px}.page-nav{padding:5px 8px;gap:1px}#pageLabel{font-size:11px;font-variant-numeric:tabular-nums;min-width:56px;text-align:center;letter-spacing:.04em}#newPage{border-left:1px solid var(--line);border-radius:0;width:34px;margin-left:3px}textarea,input:not([type=range]){width:100%;background:#ffffff05;border:1px solid var(--line);border-radius:6px;color:#e6e8ed;padding:11px 12px;font-size:14px}::placeholder{color:#75859a}.primary{background:#e8e8dc;color:#172033;border-radius:6px;padding:12px 16px;font-size:13px;min-height:44px;display:flex;justify-content:center;align-items:center;gap:10px}.primary:hover{background:#fffff0}.primary:disabled{opacity:.45}.primary svg{width:15px;height:15px}.danger{color:#d3a5a9}#toast{position:fixed;left:16px;right:16px;margin-inline:auto;width:fit-content;text-align:center;bottom:calc(100px + var(--kb,0px));z-index:20;padding:12px 20px;max-width:min(440px,calc(100vw - 32px));border:1px solid #ffffff1a;background:#142034;color:#e0e5ed;border-radius:8px;box-shadow:0 6px 30px #0006;font-size:12px;line-height:1.5}dialog{background:#0d192b;border:1px solid var(--line);color:#e7e9ef;border-radius:12px;padding:26px;width:min(360px,90vw)}dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}dialog h2{font-size:17px;font-weight:500;margin:0 0 12px}dialog p{font-size:13px;color:#a7b4c9;line-height:1.5}dialog>div{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:24px}dialog button{font-size:13px}body.drawing #paper{cursor:crosshair;touch-action:none}body.drawing .entry{pointer-events:none}

@media(max-width:850px){.bottom-bar{bottom:24px;gap:10px}.tools>button{padding:0 13px;gap:6px}.presence-bar{right:24px;font-size:10px}.connection{font-size:0;border:0;padding-left:0}.connection:before{width:6px;height:6px}}
@media(max-width:520px){.presence-bar{top:31px;right:18px;gap:6px}#presenceLabel{display:none}.avatar{width:22px;height:22px}.bottom-bar{bottom:20px;flex-direction:column;gap:10px}.tools{padding:5px}.tools>button{padding:0 23px;height:42px}.page-nav{padding:0 6px;background:#071120a0;border-color:#ffffff0a}.page-nav .icon{height:32px;width:34px}.page-nav #newPage{width:30px}input:not([type=range]){font-size:16px;padding:9px}.primary{padding:10px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:520px){.tools>button{padding:0 clamp(12px,5.5vw,23px)}}
#recoverInk{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:10;background:#473628;color:#ffe7c5;padding:10px 16px;border-radius:6px;font-size:12px}

/* In-place editing: everything happens on the page, with small floating controls. */
.popover{position:fixed;z-index:12;border:1px solid #ffffff17;background:#0b1627f2;backdrop-filter:blur(22px);box-shadow:0 14px 50px #0007,0 1px 0 #ffffff0a inset;color:#dfe5ee}
.bar-group{display:flex;align-items:center;gap:2px}
.bar-sep{width:1px;height:20px;background:#ffffff18;margin:0 6px;flex:none}
.bar-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:#b8c4d6}
.bar-icon:hover:enabled{background:#ffffff10;color:#fff}
.bar-icon svg{width:16px;height:16px}
.bar-done{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 11px;margin-left:4px;border-radius:9px;background:#e8e8dc;color:#172033;font-size:12px;font-weight:500}
.bar-done:hover{background:#fffff0}
.bar-done svg{width:15px;height:15px}
.swatch{width:22px;height:22px;border-radius:50%;margin:0 2px;box-shadow:0 0 0 2px #0b1627,0 0 0 3px #ffffff1c;transition:transform .15s}
.swatch:hover{transform:scale(1.12)}
.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #0b1627,0 0 0 4px #ecebe0}
.font-chip{height:34px;min-width:36px;padding:0 6px;border-radius:9px;font-size:21px;line-height:1;color:#9fadc2}
.font-chip:hover{color:#fff;background:#ffffff0c}
.font-chip[aria-pressed=true]{color:#f5f2e3;background:#ffffff14}
.item-bar{display:flex;align-items:center;padding:5px;border-radius:14px;transition:opacity .15s}
.item-bar.moving{opacity:0;pointer-events:none}
.item-bar.busy{opacity:.6;pointer-events:none}
.item-bar[data-kind=sticker] .bar-sep:first-of-type{display:none}
#barTilt{margin-left:4px}
.quick-menu{padding:6px;border-radius:16px;animation:pop .18s cubic-bezier(.2,.8,.3,1.2);transform-origin:top center}
.quick-actions{display:flex;gap:2px}
.quick-actions button{display:flex;flex-direction:column;align-items:center;gap:5px;width:76px;padding:11px 0 9px;border-radius:11px;font-size:11px;color:#c3cddb}
.quick-actions button:hover,.quick-actions button:focus-visible{background:#ffffff10;color:#fff}
.quick-actions svg{width:19px;height:19px}
.tray-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:4px}
.quick-menu{width:max-content}
.tray-grid button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;height:104px;padding:8px 4px 6px;border-radius:12px;transition:transform .18s,background .18s}
.tray-grid button:hover,.tray-grid button:focus-visible{background:#ffffff0e}.tray-grid button:hover img,.tray-grid button:focus-visible img{transform:rotate(-5deg) scale(1.08)}
.tray-grid img{flex:1;width:100%;min-height:0;object-fit:contain;filter:drop-shadow(0 3px 4px #0009);pointer-events:none;transition:transform .18s}
.tray{width:min(372px,calc(100vw - 24px));padding:10px;border-radius:18px;background:#0b1627fc}
/* Search sits on top; the grid scrolls under it, fading at the edges so it reads as more to see. */
.tray-search{position:relative;display:flex;align-items:center;margin:0 0 8px}
.tray-search>svg{position:absolute;left:11px;width:16px;height:16px;fill:none;stroke:#8d9cb2;stroke-width:2;stroke-linecap:round;pointer-events:none}
.tray-search input{width:100%;height:38px;padding:0 36px 0 34px;border:1px solid #ffffff14;border-radius:11px;background:#ffffff0a;color:#eef2f7;font:inherit;font-size:14px;outline:none;-webkit-appearance:none;appearance:none}
.tray-search input::placeholder{color:#7f8da3}.tray-search input:focus{border-color:#6f86b3;background:#ffffff10;box-shadow:0 0 0 3px #6f86b333}
.tray-search input::-webkit-search-cancel-button{display:none}
#trayClear{position:absolute;right:4px;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#aeb9c9}
#trayClear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}#trayClear:hover{background:#ffffff12;color:#fff}
.tray-grid{max-height:var(--tray-grid,min(336px,46vh));overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;
 -webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.tray-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;font-size:11px;line-height:1.2;text-align:center;color:#aeb9c9;overflow-wrap:anywhere}
.tray-grid button:hover .tray-name,.tray-grid button:focus-visible .tray-name{color:#fff}
.tray-empty{display:flex;flex-direction:column;align-items:center;gap:12px;margin:18px 4px 22px}
.tray .tray-empty p{margin:0;text-align:center;font-size:12.5px;color:#aeb9c9}
@media(pointer:coarse){.tray-search input{font-size:16px;height:42px}#trayClear{width:36px;height:36px}}
.tray p{margin:8px 4px 2px;font-size:11px;color:#8d9cb2}.tray.searching #trayHint{display:none}
.tray-grid button{cursor:grab;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.tray-grid button.held{background:#ffffff14}.tray-grid button.held img{transform:scale(1.14) rotate(-4deg);filter:drop-shadow(0 8px 10px #000a)}
.sign-card{width:min(290px,calc(100vw - 24px));padding:16px;border-radius:14px}
.sign-title{margin:0 0 10px;font-size:13px;font-weight:500;color:#f1efe4}
/* 16px at every size: Safari zooms the whole page into a smaller field it focuses, and this page cannot be pinched back. */
.sign-card input{width:100%;background:#ffffff06;border:1px solid var(--line);border-radius:8px;color:#e6e8ed;padding:9px 11px;font-size:16px}
.sign-card details{margin-top:10px}
.sign-card summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none;color:#9aa9c0;font-size:11px}
.sign-card summary::-webkit-details-marker{display:none}
.sign-card details input{margin-top:8px}
.sign-error{margin:10px 0 0;font-size:12px;line-height:1.45;color:#f0b5ad}
.sign-actions{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:14px;font-size:12px}
.sign-actions .primary{min-height:36px;padding:8px 16px}
.identity-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;margin-right:6px;border:1px solid #ffffff14;border-radius:16px;background:#0a1424b3;font-size:11px;color:#a9b6c9;backdrop-filter:blur(12px)}
.identity-chip strong{font-weight:500;color:#eeeadb;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.identity-chip:hover{color:#fff;border-color:#ffffff26}
.mode-hint{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border:1px solid #ffffff14;border-radius:20px;background:#0a1424e6;backdrop-filter:blur(16px);font-size:12px;color:#d1d9e5;white-space:nowrap;animation:pop .2s ease-out}
.mode-hint kbd{font:inherit;font-size:10px;padding:2px 7px;border-radius:6px;background:#ffffff12;color:#9fb0c6}
.mode-hint .mode-thumb{width:22px;height:22px;object-fit:contain;margin:-2px -2px -2px -4px}
.mode-cancel{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff12;color:#c9d3e0}.mode-cancel:before{content:'';position:absolute;inset:-10px}.mode-cancel svg{width:13px;height:13px}.mode-cancel:hover{background:#ffffff22;color:#fff}
.quick-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #526890;z-index:6;pointer-events:none;transform:scale(var(--inv,1))}
/* The tap marker's pulse is a ring that grows and fades (transform and opacity only, so it never repaints the page). */
.quick-dot:after{content:'';position:absolute;inset:-2px;border-radius:50%;background:#52689066;opacity:0;animation:ring 1.4s ease-out infinite}
.stamp-ghost{position:fixed;left:0;top:0;z-index:30;pointer-events:none;opacity:.85;filter:drop-shadow(8px 16px 10px #0006);transition:opacity .15s}
.stamp-ghost.off-paper{opacity:.35}
body.placing #paper{cursor:crosshair}
body.placing .entry{pointer-events:none}
body.placing #empty{display:none}
/* The empty page's prompt keeps a readable size on screen however small the page is drawn (--inv, see live-book.js). */
#empty small{font-size:min(44px,calc(12px * var(--inv,1)));color:#62665e;pointer-events:none}
.entry.selected:before{content:'';position:absolute;inset:-10px;border:1.5px solid #6a83b3;border-radius:4px;pointer-events:none}
.entry.draft:before{border-style:dashed}
.entry.pending{opacity:.7}
.entry.editing{cursor:text}
.inline-text{display:block;width:100%;padding:0;margin:0;border:0;outline:none;resize:none;overflow:hidden;background:transparent;color:inherit;font:inherit;line-height:1.2;white-space:pre-wrap}
.inline-text::placeholder{color:currentColor;opacity:.4}
.inline-sign{display:flex;align-items:baseline;gap:.2em;margin-top:.48em;font-size:.72em;opacity:.85}
.inline-sign input{flex:1;min-width:0;padding:0;border:0;border-bottom:1px dashed #52689066;border-radius:0;background:transparent;color:inherit;font:inherit;outline:none}
.inline-sign input::placeholder{color:currentColor;opacity:.45}
.entry.needs-name .inline-sign input{border-bottom-color:#b94e69;animation:nudge .4s}
/* A draft's handles are drawn over the book at a fixed size on screen (placeHandles in live.js): a visible dot inside a
   larger target, 44 px on touch. The stem ties the tilt knob to the draft. */
.handles{position:fixed;left:0;top:0;width:0;height:0;z-index:8;pointer-events:none}
.handle{position:absolute;left:-14px;top:-14px;width:28px;height:28px;display:grid;place-items:center;pointer-events:auto;touch-action:none}
.handle:after{content:'';width:12px;height:12px;box-sizing:border-box;border:1.5px solid #6a83b3;background:#f4f1e6;border-radius:50%;box-shadow:0 1px 4px #0003}
.handle.resize{cursor:nwse-resize}.handle.resize:after{border-radius:3px}
.handle.rotate{cursor:grab}
.handle.move{cursor:move}
.handle-stem{position:absolute;left:0;top:0;height:1.5px;margin-top:-.75px;background:#6a83b3;transform-origin:0 50%;z-index:-1}
.handles.busy .handle:after,.handles.busy .handle-stem{opacity:.45}
@media(pointer:coarse){.handle{left:-22px;top:-22px;width:44px;height:44px}.handle:after{width:18px;height:18px}}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.96)}}
.mode-hint{animation-name:hintIn}@keyframes hintIn{from{opacity:0;transform:translate(-50%,-4px)}}
@keyframes ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@keyframes nudge{25%{translate:-4px 0}75%{translate:4px 0}}
@media(max-width:520px){.item-bar{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 24px)}.mode-hint{top:74px;font-size:11px}.identity-chip span{display:none}}
.entry .inline-text:focus-visible,.entry .inline-sign input:focus-visible{outline:none}
.bar-done:disabled{opacity:.4;cursor:default}
/* Dragging across the page should never highlight it like a document; only the fields you type in are selectable. */
.live-body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.live-body input,.live-body textarea{-webkit-user-select:text;user-select:text}
.item-bar{flex-wrap:wrap;justify-content:center;row-gap:4px;max-width:calc(100vw - 24px)}
.inline-text{padding:.06em 0;box-sizing:content-box}
/* Stickers: lifted with their backing while being placed, then peeled and pressed onto the page. */
.entry.sticker{perspective:800px}
.sticker-body{position:relative;transform-origin:50% 6%}
.sticker-liner,.sticker-press,.sticker-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.sticker-liner{z-index:-1;background:linear-gradient(140deg,#ffffff 0%,#e3e8ee 50%,#aeb8c5 100%);transform-origin:0 0}
.sticker-press{background:radial-gradient(ellipse 46% 50% at 50% 50%,#2a241870,transparent 72%) no-repeat;background-size:100% 55%;background-position:50% -60%;mix-blend-mode:multiply}
.sticker-sheen{background:linear-gradient(110deg,transparent 40%,#ffffffd9 50%,transparent 60%) no-repeat;background-size:300% 100%;background-position:130% 0;mix-blend-mode:screen}
.entry.sticker.lifted .sticker-body{transform:translateY(-12px) rotateX(16deg) rotateZ(-1deg) scale(1.05);animation:hover 2.8s ease-in-out infinite}
.entry.sticker.lifted img{filter:drop-shadow(8px 22px 12px #10182a55)}
.entry.sticker.lifted .sticker-liner{opacity:1;transform:translate(7px,9px) scale(1.03)}
.entry.sticker.sticking{pointer-events:none}
.entry.sticker.sticking .sticker-body{animation:stick 1.4s cubic-bezier(.3,.7,.3,1) both}
.entry.sticker.sticking img{animation:settle 1.4s ease both}
.entry.sticker.sticking .sticker-liner{animation:peel 1.4s cubic-bezier(.45,0,.55,1) both}
.entry.sticker.sticking .sticker-press{animation:press 1.4s ease-in-out both}
.entry.sticker.sticking .sticker-sheen{animation:sheen 1.4s ease-out both}
@keyframes hover{50%{transform:translateY(-15px) rotateX(18deg) rotateZ(-.4deg) scale(1.05)}}
@keyframes stick{
 0%{transform:translateY(-12px) rotateX(16deg) rotateZ(-1deg) scale(1.05)}
 36%{transform:translateY(-18px) rotateX(21deg) rotateZ(-1.6deg) scale(1.07)}
 58%{transform:translateY(-3px) rotateX(7deg) rotateZ(-.3deg) scale(1.015)}
 70%{transform:translateY(0) rotateX(-1.5deg) scale(.985)}
 84%{transform:rotateX(.6deg) scale(1.004)}
 100%{transform:none}}
@keyframes settle{0%,36%{filter:drop-shadow(8px 22px 12px #10182a55)}70%,100%{filter:drop-shadow(1px 3px 2px #2833402c)}}
@keyframes peel{
 0%{opacity:1;transform:perspective(500px) translate(7px,9px) scale(1.03)}
 14%{opacity:1;transform:perspective(500px) translate(9px,12px) scale(1.03) rotate3d(1,-1,0,24deg)}
 34%{opacity:1;transform:perspective(500px) translate(16%,20%) scale(1.02) rotate3d(1,-1,0,52deg)}
 52%{opacity:0;transform:perspective(500px) translate(48%,62%) scale(.96) rotate3d(1,-1,0,70deg)}
 100%{opacity:0;transform:perspective(500px) translate(48%,62%)}}
@keyframes press{0%,56%{opacity:0;background-position:50% -60%}64%{opacity:1}92%{opacity:.8;background-position:50% 160%}100%{opacity:0;background-position:50% 160%}}
@keyframes sheen{0%,76%{opacity:0;background-position:130% 0}84%{opacity:1}100%{opacity:0;background-position:-30% 0}}
@media(max-width:520px){}
/* Panning: a hand while Space is held, a closed hand while dragging the view. */
.live-body{touch-action:none}
.live-body.hand,.live-body.hand *{cursor:grab!important}
.live-body.panning,.live-body.panning *{cursor:grabbing!important}
.live-body.hand .entry{pointer-events:none}
.live-body{--view-bottom:max(28px,env(safe-area-inset-bottom))}
/* Up to 1020 px the centred bottom bar would reach the view controls (216 px, 253 with the compass), so they sit above it. */
@media(max-width:1020px){.live-body{--view-bottom:96px}}
@media(max-width:520px){.live-body{--view-bottom:152px}.view-controls{left:10px}}
/* Zoomed in, the page can sit behind the presence bar, so it carries its own backing. */
.presence-bar{padding:4px 12px 4px 4px;border:1px solid #ffffff10;border-radius:22px;background:#0a1424b8;backdrop-filter:blur(14px)}
.presence-bar .identity-chip{border-color:transparent}
/* Compact toolbar: one button each for handwriting and colour, opening a small drawer. */
.item-bar{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.bar-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;row-gap:4px}
.bar-pick{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 7px 0 10px;border-radius:9px;color:#e6ebf2}
.bar-pick:hover,.bar-pick[aria-expanded=true]{background:#ffffff12}
.bar-pick svg{width:12px;height:12px;opacity:.55}
#barFontSample{font-size:21px;line-height:1}
.bar-pick .dot{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px #0b1627,0 0 0 3.5px #ffffff70}
.bar-drawer{display:flex;justify-content:center;margin-top:5px;padding-top:5px;border-top:1px solid #ffffff12}
/* While you write, other contributions step back, and an overlap is flagged. */
.entry{transition:opacity .2s}
.live-body.drafting .entry:not(.draft){opacity:.6}
.entry.draft.overlapping:before{border-color:#c98a3d}
.bar-note{margin:5px 4px 1px;padding:6px 10px;border-radius:8px;background:#c98a3d1f;color:#e8b77a;font-size:11px;line-height:1.4;text-align:center}
/* The move grip reads as a handle: a small tab with arrows at the note's corner. */
.handle.move:after{width:22px;height:22px;border-radius:7px;border-color:#6a83b3;background:#6a83b3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18M12 3 9 6m3-3 3 3M12 21l-3-3m3 3 3-3M3 12l3-3m-3 3 3 3M21 12l-3-3m3 3-3 3'/%3E%3C/svg%3E") center/15px no-repeat}
.entry.draft.editing:not(.empty) .inline-text{cursor:text}
.entry.dragging .inline-text,.entry.dragging .inline-sign input{pointer-events:none;user-select:none}
@media(pointer:coarse){.handle.move:after{width:28px;height:28px;background-size:17px}}
/* Toasts are information only; they must never swallow clicks meant for the tray or toolbar under them. */
#toast{pointer-events:none}
.bar-note.error{background:#b94e6926;color:#f1a9b4}
/* The pen writing a placed note: waiting letters are a faint guide, the letter under the nib fills with ink. */
.entry.writing{cursor:default}
.entry.writing .ink-char{opacity:.1}
.entry.writing .ink-char.inked{opacity:1}
/* The ink edge is a mask that follows the nib (--p), so colour emoji keep their colours. The padding, cancelled by the
   margin, gives strokes that overhang the letter's advance (the hook of an f, the bar of a T) room to be inked. */
.entry.writing .ink-char.inking{--pad:.4em;opacity:1;padding:.35em var(--pad);margin:-.35em calc(var(--pad)*-1);-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p,0px) + var(--pad)),#0000001a calc(var(--p,0px) + var(--pad) + .06em));mask-image:linear-gradient(90deg,#000 calc(var(--p,0px) + var(--pad)),#0000001a calc(var(--p,0px) + var(--pad) + .06em));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* Right-to-left letters fill from the right, where the nib starts. */
.entry.writing .ink-char.inking.ink-rtl{-webkit-mask-image:linear-gradient(90deg,#0000001a calc(var(--p,0px) + var(--pad) - .06em),#000 calc(var(--p,0px) + var(--pad)));mask-image:linear-gradient(90deg,#0000001a calc(var(--p,0px) + var(--pad) - .06em),#000 calc(var(--p,0px) + var(--pad)))}
/* Joining scripts (Arabic, Indic...) keep no side padding: padding at an inline box's edge breaks shaping there. */
.entry.writing .ink-char.inking.ink-join{--pad:0px;padding-inline:0;margin-inline:0}
/* Links stay out of sight and out of reach (pointer and Tab) until the note is written. */
.entry.writing .entry-links{opacity:0;visibility:hidden}
.entry .entry-links{transition:opacity .5s,visibility .5s}
/* The note you just placed sinks into its faint guide as the pen arrives, instead of blinking out. */
@keyframes ink-sink{from{opacity:1}}
.entry.writing.from-draft .ink-char:not(.inking):not(.inked){animation:ink-sink .35s ease-out}
.ink-tip{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
/* Above the page (#workspace is 1), below the toolbars and bars (4-6). */
.ink-pen{position:fixed;left:0;top:0;z-index:3;pointer-events:none;will-change:transform}
/* The global svg rule strokes every shape with currentColor; the pen's shapes are fills only. */
.ink-pen svg{display:block;overflow:visible;stroke:none}

/* ── Release pass: phones first ─────────────────────────────────────────── */
/* The sky around the page is <html> (every child of body is fixed, so body has no height). Without this a pinch there
   zoomed the whole interface natively and a drag stopped after a few pixels, while the same gestures on the page moved
   the book. No pull-to-refresh or rubber-banding either. */
html{touch-action:none;overscroll-behavior:none}
.live-body{overscroll-behavior:none}
/* Safari zooms into a focused field under 16px; a note's signature line can be smaller when its note is. */
@media(pointer:coarse){.inline-sign input{font-size:max(16px,1em)}}
/* Toasts take the view hint's slot above the view controls (the hint gives way), and rise above the keyboard. */
@media(max-width:1020px){#toast{bottom:calc(var(--view-bottom) + 56px + var(--kb,0px))}}
/* The presence pill moves to its own row when it would run into the mode switch (fitPresence in live.js). */
body.bar-stacked .presence-bar{top:69px;right:16px}
body.bar-stacked .mode-hint{top:120px}
body.bar-stacked #recoverInk{top:124px}
@media(max-width:520px){.identity-chip strong{max-width:96px}}
/* Toolbar: text buttons for editing a saved note, and room between Discard and Place on touch. */
.bar-text{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border-radius:9px;font-size:12px;color:#dfe5ee}
.bar-text:hover{background:#ffffff10}.bar-text svg{width:15px;height:15px}
.bar-icon.danger{color:#d3a5a9}
@media(pointer:coarse){.bar-done{margin-left:12px}.bar-icon,.bar-done,.bar-pick,.bar-text{height:40px}.bar-icon{width:40px}}
dialog>div button{min-height:44px;padding:0 16px;border-radius:10px}
/* Phones held sideways: both bars share the bottom row (view controls left, tools and pages right), leaving the height
   to the book. Narrow ones drop the zoom buttons; pinch and the level still zoom and fit. */
@media(orientation:landscape) and (max-height:500px){
 .live-body{--view-bottom:max(12px,env(safe-area-inset-bottom))}
 .bottom-bar{left:auto;right:max(12px,env(safe-area-inset-right));transform:none;bottom:max(12px,env(safe-area-inset-bottom))}
 #toast{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 62px + var(--kb,0px))}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:760px){#viewZoomOut,#viewZoomIn,#viewFit,.view-controls .view-sep{display:none}}

/* ── Writing on a phone (layoutCompose in live.js) ──────────────────────────
   The composer sits on the keyboard (--compose-bottom); the book is framed into the stage above it. */
.composer{position:fixed;left:8px;right:8px;bottom:max(var(--compose-bottom,12px),env(safe-area-inset-bottom));z-index:14;max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid #ffffff1c;border-radius:20px;background:#0b1627;box-shadow:0 -8px 36px #0009,0 1px 0 #ffffff0d inset;touch-action:manipulation}
/* A last resort: however tall it gets (a drawer open on a small phone), it scrolls inside what you can see. */
.composer{max-height:calc(var(--compose-vh,100dvh) - 12px);overflow:hidden auto;overscroll-behavior:contain}
.composer.beside{left:auto;right:max(8px,env(safe-area-inset-right));width:clamp(290px,46vw,380px);margin:0}
/* Your words on a slip of the page's paper, in the note's own handwriting and ink (font and size set in live.js). */
.compose-field{position:relative;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px #0000000d}
.compose-field:focus-within{box-shadow:inset 0 0 0 1px #0000000d,0 0 0 2px #6a83b3}
#composeText{display:block;width:100%;min-height:0;margin:0;padding:7px 14px;border:0;border-radius:14px;background:transparent;color:var(--ink);font-size:24px;line-height:1.2;resize:none;outline:none;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#composeText::placeholder{color:currentColor;opacity:.42}
.compose-count{position:absolute;right:10px;bottom:5px;font-size:11px;line-height:1;color:#62645c;pointer-events:none}
/* The count takes the corner, so the words keep clear of it; words scrolled out of sight above fade into the edge. */
.compose-field.counting #composeText{padding-right:36px}
.compose-field.scrolled:before{content:'';position:absolute;inset:0 0 auto;height:14px;border-radius:14px 14px 0 0;background:linear-gradient(var(--paper),#efe9dc00);pointer-events:none;z-index:1}
/* The note's toolbar docks under the words: discard, style, map, your signature, Place. */
.composer .item-bar{position:static;display:flex;flex-direction:column;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
.composer .bar-row{justify-content:flex-start;flex-wrap:nowrap;gap:4px}
.composer .bar-icon,.composer .bar-pick{height:42px;min-width:42px;border-radius:12px;flex:none}
.composer #barColor,.composer .bar-sep{display:none}
.font-dot{display:none}
.composer .font-dot{display:block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1.5px #0b1627,0 0 0 2.5px #ffffff80}
.compose-sign{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;height:42px;padding:0 4px 0 8px;color:#98a7bd;font-size:16px}
#composeName{flex:1;min-width:0;height:32px;margin:0;padding:0 2px;border:0;border-bottom:1px dashed #98a7bd66;border-radius:0;background:transparent;color:#eeeadb;font-size:16px;outline:none}
#composeName::placeholder{color:#7d8ba1;opacity:1}
#composeName:focus{border-bottom:1px solid #a8bedb}
.compose-sign.needs-name{color:#f1a9b4;animation:nudge .4s}
.compose-sign.needs-name #composeName{border-bottom:1px solid #f1a9b4}
.composer #commitItem{height:42px;margin-left:auto;padding:0 16px 0 13px;border-radius:12px;font-size:14px;flex:none}
/* A small phone gives your name its own row above the buttons, so it never reads "your nam". */
.composer.narrow .bar-row{flex-wrap:wrap;row-gap:2px}
.composer.narrow .compose-sign{order:-1;flex-basis:100%;height:36px}
/* While you type the words, that row folds away to leave the book the room (Place brings it back if it is empty). */
body.compose-text .composer.narrow .compose-sign{display:none}
/* Discard asks once more: the ✕ grows a label for a few seconds, and a second tap throws the note away. */
.compose-cancel-label{display:none}
#composeCancel.armed{width:auto;gap:5px;padding:0 12px 0 9px;background:#b94e6933;color:#f1a9b4}
#composeCancel.armed .compose-cancel-label{display:inline;font-size:13px;font-weight:500}
/* One drawer above the buttons holds handwriting, size and ink, with thumb-sized targets. */
.composer .bar-drawer{order:-1;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:0 0 4px;padding:2px 0 6px;border-top:0;border-bottom:1px solid #ffffff12}
.composer #barFonts{order:1}.composer #barSize{order:2;gap:4px}.composer #barSize .bar-icon{border:1px solid #ffffff14}
.composer #barColors{order:3;flex-basis:100%;justify-content:center;padding-top:4px}
.composer .bar-drawer .swatch{width:30px;height:30px;margin:0 5px}
.composer .bar-drawer .font-chip{height:42px;min-width:46px;font-size:24px}
/* The map: the whole page in miniature, other notes grey, yours in the selection blue, the part on screen outlined. */
.compose-map{flex:none;display:grid;place-items:center;width:56px;height:42px;padding:0;border-radius:12px}
.map-page{position:relative;display:block;width:50px;height:35px;border-radius:3px;background:linear-gradient(90deg,#d9d1bf 0,#efe9dc 9%);overflow:hidden;box-shadow:0 0 0 1px #ffffff40}
.map-item{position:absolute;border-radius:1px;background:#7b8090;opacity:.45}
.map-note{position:absolute;border-radius:1px;background:#526890}
.map-view{position:absolute;border:1.5px solid #252c3e;border-radius:2px;background:#252c3e10}
.compose-map[aria-pressed=true]{background:#ffffff14}
.compose-map[aria-pressed=true] .map-page{box-shadow:0 0 0 2px #a8bedb}
.compose-map[aria-pressed=true] .map-view{display:none}
.compose-caption{margin:0;padding:2px 8px 0;font-size:12.5px;line-height:1.35;color:#b9c5d6;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compose-caption[data-tone=warn]{color:#e8b77a}.compose-caption[data-tone=error]{color:#f1a9b4}
.caption-action{display:inline-block;height:24px;margin-left:8px;padding:0 8px;border-radius:8px;background:#ffffff14;color:#e6ebf2;font-size:12.5px;font-weight:600;vertical-align:middle}
/* Everything else steps aside while you write, and while the pen writes the note you placed. */
body.composing .mode-nav,body.composing .presence-bar,body.composing .bottom-bar,body.composing .view-controls,body.composing .view-hint,body.composing .mode-hint,body.composing #recoverInk,
body.inking .mode-nav,body.inking .presence-bar,body.inking .bottom-bar,body.inking .view-controls,body.inking .view-hint{opacity:0;visibility:hidden;pointer-events:none}
body.compose-typing #handles{display:none!important}
body.composing #empty{display:none}
body.composing .entry:not(.composed){opacity:.6;pointer-events:none}
body.composing .entry.composed:before{inset:-12px;z-index:-1;background:#fffdf680}
body.composing .entry.composed.overlapping:before{background:#fff1dc90}
/* Seen whole, the note glows so it can be found at a glance. */
body.compose-peek .entry.composed:before{border-width:4px;background:#dfe7f8c0;box-shadow:0 0 0 18px #5268902e}
/* The caret on the page, where the next letter will be written. */
.compose-caret{display:inline-block;width:0;height:1.1em;margin-right:-.07em;vertical-align:-.2em;border-left:.07em solid currentColor;visibility:hidden}
body.compose-text .compose-caret{visibility:visible;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.compose-placeholder{opacity:.4}
/* Where the note lands: the page's own tap marker, at a constant size on screen. */
.compose-pin{position:fixed;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;will-change:transform}
.compose-pin:before{content:'';position:absolute;left:-8px;top:-8px;width:16px;height:16px;box-sizing:border-box;border:2px solid #526890;border-radius:50%;background:#52689026}
.compose-pin:after{content:'';position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#52689066;opacity:0;animation:ring 1.4s ease-out infinite}
.compose-pin.drop:before{animation:pin-drop .38s cubic-bezier(.3,1.5,.5,1)}
@keyframes pin-drop{from{transform:scale(2.4);opacity:0}}

/* ── Making a sticker (makeSticker in live.js) ──────────────────────────────
   A folded row under the search opens a one-line form. It sits in the tray's dark glass with a faint violet wash, the
   colour of the sparkle; the states (checking, drawing, a problem) take the note under the field, which keeps two lines
   of room so nothing below it jumps. */
.tray-maker{margin:0 0 8px;border:1px solid #ffffff12;border-radius:12px;background:linear-gradient(115deg,#7850a41f,#294d9a17 55%,#ffffff05)}
.make-open{display:flex;align-items:center;gap:9px;width:100%;height:38px;padding:0 10px 0 11px;border-radius:11px;font-size:13px;color:#e6ebf2;text-align:left}
.make-open:hover{background:#ffffff08}
.make-open>svg:first-child{width:17px;height:17px;color:#cdbdf0}
.make-title{flex:none;font-weight:500}
.make-sub{flex:1;min-width:0;text-align:right;font-size:11.5px;color:#8d9cb2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray-maker.busy .make-sub{color:#cdbdf0}
.make-chevron{width:14px;height:14px;opacity:.6;transition:transform .2s}
.tray-maker.open .make-chevron{transform:rotate(180deg)}
.make-form{padding:0 8px 8px}
.make-row{display:flex;gap:6px}
#makeText{flex:1;min-width:0;width:auto;height:38px;margin:0;padding:0 11px;border:1px solid #ffffff1c;border-radius:10px;background:#07101d;color:#eef2f7;font:inherit;font-size:14px;outline:none;-webkit-appearance:none;appearance:none}
#makeText::placeholder{color:#6f7d93}
#makeText:focus{border-color:#8f7cc6;box-shadow:0 0 0 3px #7850a438}
#makeText:read-only{color:#9aa7ba}
.make-go{position:relative;flex:none;height:38px;padding:0 15px;border-radius:10px;background:#e8e8dc;color:#172033;font-size:13px;font-weight:600}
.make-go:hover:enabled{background:#fffff0}
.make-go:disabled{opacity:1;background:#d4d5cb}
.make-spin{display:none;position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid #17203333;border-top-color:#172033;border-radius:50%;animation:spin .8s linear infinite}
.tray-maker.busy .make-spin{display:block}
.tray-maker.busy #makeGoLabel{visibility:hidden}
.tray .make-note{margin:7px 2px 0;min-height:2.7em;font-size:11.5px;line-height:1.35;color:#8d9cb2}
.tray .make-note[data-tone=busy]{color:#dcd2f6}
.make-note[data-tone=busy]:before{content:'';display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;background:#cdbdf0;animation:breathe 1s ease-in-out infinite alternate}
.tray .make-note[data-tone=error]{color:#f1a9b4}
.tray .make-note[data-tone=ok]{color:#a9d9bf}
@media(pointer:coarse){#makeText{font-size:16px;height:42px}.make-go{height:42px}.make-open{height:42px}}
/* Describing a sticker with the keyboard up on a phone: the tray is just the search and the form (placeTray). */
.tray.compact .tray-grid,.tray.compact .tray-empty,.tray.compact #trayHint,.tray.tight .tray-search{display:none}.tray.compact .tray-maker{margin-bottom:0}
/* Community stickers follow the built-in ones under a quiet heading; the one being drawn shimmers at its top. */
.tray-grid{position:relative}
.tray-section{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:12px 4px 2px;font-size:11px;font-weight:500;color:#aeb9c9}
.tray-section:after{content:'';flex:1;height:1px;background:#ffffff14}
.tray-pending{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;height:104px;padding:8px 4px 6px;border-radius:12px;background:#ffffff08}
.pending-art{position:relative;display:grid;place-items:center;flex:1;width:74%;min-height:0;border-radius:16px;border:1.5px dashed #cdbdf04d;overflow:hidden}
.pending-art:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#cdbdf026 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 1.6s ease-in-out infinite}
.pending-art svg{width:22px;height:22px;color:#cdbdf0;animation:breathe 1.2s ease-in-out infinite alternate}
.tray-pending .tray-name{color:#8d9cb2;font-style:italic}
.tray-grid button.fresh{position:relative;animation:made-in .45s cubic-bezier(.2,.8,.3,1.25)}
.tray-grid button.fresh:after{content:'New';position:absolute;top:5px;right:5px;padding:0 6px;border-radius:8px;background:#7850a466;color:#ece6fb;font-size:9.5px;font-weight:600;line-height:16px;letter-spacing:.03em;pointer-events:none}
.tray-grid button.art-missing{display:none}
.make-query{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:38px;padding:0 15px;border:1px solid #cdbdf033;border-radius:19px;background:#7850a42e;color:#ece6fb;font-size:12.5px}
.make-query:hover{background:#7850a447}
.make-query>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.make-query svg{width:15px;height:15px;color:#cdbdf0}
/* A sticker you made while the tray was closed waits there: a dot on Stickers says so. */
#stickerTool{position:relative}
#stickerTool.has-new:after{content:'';position:absolute;top:9px;right:11px;width:7px;height:7px;border-radius:50%;background:#cdbdf0;box-shadow:0 0 0 2px #0a1425}
/* A made sticker's name is the visitor's words: a long one is cut short in the hint instead of running off screen. */
.mode-hint{max-width:calc(100vw - 24px)}.mode-hint>span{min-width:0;overflow:hidden;text-overflow:ellipsis}.mode-hint .mode-thumb,.mode-cancel{flex:none}
/* A made sticker taken down by moderation draws nothing on the page. */
.entry.sticker.art-missing .sticker-body{visibility:hidden}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{from{opacity:.45;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes made-in{from{opacity:0;transform:scale(.8)}}