/* graal.codes design system + shared chrome. Warm off-white, one red accent. Header: text wordmark with room on the left, a white pill nav grouped with a red circular settings button on the right, round-dot separators. Light/dark is a token swap on . */ :root{ --bg:#fbfbf8; --surface:#ffffff; --raised:#f4f2ec; --ink:#23201b; --muted:#8b8479; --line:#ecebe4; --line-strong:#dcd9d0; --accent:#8e441d; --accent-ink:#fff8f0; --accent-weak:#f4ece2; --accent-strong:#73370f; --accent-mid:#ae6948; --sel:#8c5285; --sel-ink:#ffffff; --sel-weak:#f3eaf1; --dot:#cfccc2; --chk1:#e7e4dc; --chk2:#f2f1ec; --ok:#1f8f5f; --warn:#c2410c; --danger:#d9434e; --radius:14px; --radius-sm:9px; --pill:999px; --ctrl:40px; --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace; --maxw:1120px; --readw:760px; --sh-sm:0 1px 3px rgba(40,35,28,.06); --sh:0 10px 30px rgba(40,35,28,.10),0 2px 6px rgba(40,35,28,.05); --canvas-sh:rgba(40,35,28,.20); color-scheme:light; } html[data-theme="dark"]{ --bg:#16140f; --surface:#201d17; --raised:#282319; --ink:#f0ece2; --muted:#a39a8a; --line:#2c281f; --line-strong:#403a2e; --accent:#bd6a3e; --accent-ink:#fff8f0; --accent-weak:#33241a; --accent-strong:#dc9266; --accent-mid:#c98256; --sel:#c294bb; --sel-ink:#1c141c; --sel-weak:#2a1f29; --dot:#4a4438; --chk1:#282319; --chk2:#201d17; --ok:#3bbd84; --warn:#e07a44; --danger:#e2606a; --sh-sm:0 1px 3px rgba(0,0,0,.5); --sh:0 10px 30px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4); --canvas-sh:rgba(0,0,0,.5); color-scheme:dark; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html{scrollbar-gutter:stable} a,button{touch-action:manipulation} body{margin:0;min-height:100vh;min-height:100dvh;font:16px/1.55 var(--ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased} a{color:inherit} button{font:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} /* ---------- header (injected by chrome.js) ---------- */ .chrome{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;max-width:var(--maxw);margin:0 auto;padding:14px 18px;background:var(--bg)} .brand{flex:none;display:flex;flex-direction:column;line-height:1.1;text-decoration:none;color:var(--ink);padding:6px 8px;margin:-6px -8px;border-radius:10px} .brand .tag{font-size:9px;letter-spacing:.04em;color:var(--accent-mid)} .brand .word{font-family:var(--mono);font-size:19px;letter-spacing:-.01em} .brand .word b{color:var(--accent);font-weight:inherit} .navpill{margin-left:auto;height:46px;box-sizing:border-box;display:flex;align-items:center;background:var(--surface);border-radius:var(--pill);padding:0 8px;box-shadow:var(--sh-sm);max-width:100%;overflow:auto;scrollbar-width:none} .navpill::-webkit-scrollbar{display:none} .navpill a{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;align-self:stretch;text-decoration:none;color:var(--ink);font-size:14px;padding:0 14px;white-space:nowrap;border-radius:var(--pill)} .navpill a::after{content:attr(data-text);height:0;overflow:hidden;visibility:hidden;font-weight:600;pointer-events:none} .navpill a:hover{color:var(--accent-strong)} .navpill a[aria-current="page"]{color:var(--accent);font-weight:600} .navsep{flex:none;width:3px;height:17px;background-image:radial-gradient(var(--dot) 1.3px,transparent 1.5px);background-size:3px 6px} .cog{position:relative;flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--sel);color:var(--sel-ink);display:grid;place-items:center;cursor:pointer;transition:filter .12s,transform .12s,background-color .25s ease,color .25s ease} .cog[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink)} .cog::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none} .cog[aria-expanded="true"]::after{animation:cogping .5s ease-out} @keyframes cogping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}100%{box-shadow:0 0 0 14px transparent}} .cog svg{transition:transform .45s cubic-bezier(.34,1.1,.5,1)} .cog[aria-expanded="true"] svg{transform:rotate(180deg) scale(1.08)} .cog:hover{filter:brightness(1.05)} .cog:active{transform:scale(.96)} .cog svg{width:20px;height:20px;display:block} /* ---------- settings drawer (injected by chrome.js) ---------- */ .scrim{position:fixed;inset:0;background:rgba(10,10,8,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s;z-index:60} .scrim.open{opacity:1;visibility:visible} .drawer{position:fixed;top:0;right:0;height:100%;width:min(360px,88vw);z-index:61;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh);transform:translateX(102%);transition:transform .38s cubic-bezier(.3,1.25,.4,1);display:flex;flex-direction:column} .drawer .body>*{opacity:0;transform:translateX(22px);transition:opacity .3s ease,transform .36s cubic-bezier(.3,1.25,.4,1)} .drawer.open .body>*{opacity:1;transform:none} .drawer.open .body>*:nth-child(1){transition-delay:.07s} .drawer.open .body>*:nth-child(2){transition-delay:.19s} .drawer.open .body>*:nth-child(3){transition-delay:.13s} .drawer.open .body>*:nth-child(4){transition-delay:.25s} .drawer.open{transform:none} .drawer header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)} .drawer header h2{margin:0;font-size:15px;font-weight:700} .drawer .close{border:0;background:none;color:var(--muted);font-size:24px;line-height:1;width:34px;height:34px;border-radius:var(--radius-sm);cursor:pointer} .drawer .close:hover{background:var(--raised);color:var(--ink)} .drawer .body{padding:4px 18px 22px;overflow:auto} .setgroup{padding:16px 0;border-bottom:1px solid var(--line)} .setgroup:last-child{border-bottom:0} .setgroup>.label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .setgroup .hint{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45} .field{width:100%;font:inherit;font-size:14px;padding:10px 11px;color:var(--ink);background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--radius-sm)} /* ---------- shared controls ---------- */ .seg{position:relative;display:inline-flex;align-items:center;height:var(--ctrl);background:var(--raised);border-radius:var(--pill);padding:0 4px;gap:2px} .seg__thumb{position:absolute;top:0;left:0;height:32px;border-radius:var(--pill);background:var(--accent);z-index:2;pointer-events:none;overflow:hidden;transition:transform .26s cubic-bezier(.34,1.1,.5,1),width .26s cubic-bezier(.34,1.1,.5,1)} .seg__thumbLabels{position:absolute;top:0;left:0;height:100%;transition:transform .26s cubic-bezier(.34,1.1,.5,1)} .seg__thumbLabels span{position:absolute;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:600;color:var(--accent-ink);white-space:nowrap} .seg button{position:relative;z-index:1;border:0;background:none;color:var(--muted);font-size:13.5px;font-weight:600;height:32px;padding:0 14px;border-radius:var(--pill);cursor:pointer;white-space:nowrap;transition:color .18s} .seg button:hover{color:var(--ink)} .seg button[aria-pressed="true"]{color:var(--muted)} .seg:not(.seg--js) button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} .seg.hl:not(.seg--js) button[aria-pressed="true"]{background:var(--sel);color:var(--sel-ink)} .seg.hl .seg__thumb{background:var(--sel)} .seg.hl .seg__thumbLabels span{color:var(--sel-ink)} .seg.disabled{opacity:.4;pointer-events:none} .setlbl{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:16px 0 7px} .toggle{display:inline-flex;align-items:center;height:var(--ctrl);box-sizing:border-box;border:4px solid var(--raised);background:var(--raised);color:var(--muted);font-size:13.5px;font-weight:600;padding:0 14px;border-radius:var(--pill);cursor:pointer;transition:background-color .2s ease,color .2s ease} .toggle:hover{color:var(--ink)} /* year picker -- a Google-Translate-style popover (multi-column grid of years), reusable for other filters */ .ymenu{position:relative;display:inline-flex} .ymenu__btn{display:inline-flex;align-items:center;gap:5px;height:var(--ctrl);box-sizing:border-box;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--pill);padding:0 9px 0 14px;cursor:pointer} .ymenu__btn:hover{color:var(--ink)} .ymenu__btn svg{width:16px;height:16px;flex:none} .ymenu__panel{position:absolute;top:calc(100% + 6px);left:0;z-index:50;display:grid;grid-template-columns:repeat(4,minmax(52px,1fr));gap:4px;min-width:236px;max-width:min(92vw,320px);max-height:60vh;overflow:auto;padding:8px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--sh)} .ymenu__panel[hidden]{display:none} .ymenu__opt{font:inherit;font-size:13px;font-weight:600;padding:7px 8px;border:1px solid transparent;border-radius:6px;background:none;color:var(--ink);cursor:pointer;text-align:center;font-variant-numeric:tabular-nums} .ymenu__opt:hover{background:var(--raised)} .ymenu__opt[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} .ymenu__opt--wide{grid-column:1/-1;text-align:left} .toggle[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} .btn{display:inline-block;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;padding:10px 15px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;text-align:center} .btn:hover{border-color:var(--muted)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn.block{display:block;width:100%} /* ---------- content pages ---------- */ .page{max-width:var(--readw);margin:0 auto;padding:24px 18px 72px} .page h1{font-size:29px;margin:0 0 8px;letter-spacing:-.02em} .page .lead{color:var(--muted);margin:0 0 26px;font-size:17px;line-height:1.55} .cardlink{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s} .cardlink:hover{transform:translateY(-2px);box-shadow:var(--sh)} .cardlink h2{font-size:18px;margin:0 0 5px} .cardlink p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5} .cardnote{color:var(--accent);font-weight:600} .linkcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;box-shadow:var(--sh-sm);transition:transform .12s,box-shadow .12s} .linkcard:hover{transform:translateY(-2px);box-shadow:var(--sh)} .linkcard h2{font-size:18px;margin:0 0 5px} .linkcard h2 a{color:inherit;text-decoration:none} .linkcard h2 a::after{content:"";position:absolute;inset:0;z-index:1} .linkcard p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5} .linkcard p a{position:relative;z-index:2;color:var(--accent);font-weight:600;text-decoration:none} .linkcard p a:hover{text-decoration:underline} .soon{opacity:.7} .soon .pill{display:inline-block;font-size:11px;border:1px solid var(--line-strong);border-radius:var(--pill);padding:1px 9px;margin-left:6px;color:var(--muted);vertical-align:middle} /* ---- tool cards: text beside a coupled before->after preview (1:1) ---- */ .toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;grid-auto-rows:1fr;margin-bottom:14px} .toolgrid--soon{grid-auto-rows:auto;margin-bottom:0} .toolgrid>.linkcard,.toolgrid>.cardlink{margin-bottom:0} .toolgrid>.linkcard{display:flex;flex-direction:column} .toolrow{display:flex;flex-direction:column;gap:14px;flex:1} .toolbody{min-width:0} .examples{position:relative;z-index:2;flex:none;align-self:center;margin-top:auto;box-sizing:content-box;width:192px;height:144px;overflow:hidden;border:1px solid var(--line-strong);border-radius:8px;background-color:var(--chk2);background-image:linear-gradient(45deg,var(--chk1) 25%,transparent 25%),linear-gradient(-45deg,var(--chk1) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--chk1) 75%),linear-gradient(-45deg,transparent 75%,var(--chk1) 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0} .exstage{display:grid} .expair{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;opacity:0;transition:opacity .6s ease} .expair.is-on{opacity:1} .exreveal{position:absolute;inset:0;overflow:hidden} .exlayer{position:absolute;inset:0;width:100%;height:100%;object-fit:scale-down;image-rendering:pixelated} .exseam{position:absolute;top:0;bottom:0;width:6px;margin-left:-3px;box-sizing:border-box;background:var(--surface);border-left:1px solid var(--line);border-right:1px solid var(--line);opacity:0;transition:opacity .15s ease;pointer-events:none} .toolgrid h2{text-align:center} .exslot{flex:none;display:grid;place-items:center;width:192px;height:144px;border:1.5px dashed var(--line-strong);border-radius:8px;color:var(--muted)} .exslot svg{opacity:.5} .exarrow{flex:none;color:var(--muted);transform:rotate(90deg)} .exarrow svg{display:block;width:20px;height:20px} @media (max-width:640px){.toolgrid{grid-template-columns:1fr;grid-auto-rows:auto}} /* "___ to ___" maker teaser: underlined slots flip through formats to show the variety of conversions */ .fmtrot{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.15em .5ch} .fmtslot{display:inline-grid;justify-items:center;padding:0 .4ch;border-bottom:2px solid var(--line-strong)} .fmtword{grid-area:1/1;white-space:nowrap;transition:opacity .45s ease} .fmtto{color:var(--muted)} .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0} .guide{max-width:var(--readw)} .guide h2{font-size:21px;margin:32px 0 10px;letter-spacing:-.01em} .guide h3{font-size:16px;margin:22px 0 6px} .guide p{margin:0 0 13px;line-height:1.6} .guide ul{margin:0 0 14px;padding-left:20px} .guide code{font-family:var(--mono);background:var(--raised);padding:1px 6px;border-radius:5px;font-size:13.5px} .guide .slots{list-style:none;padding:0;margin:10px 0 16px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)} .guide .slots li{display:flex;gap:12px;align-items:baseline;margin:0;padding:9px 14px;border-top:1px solid var(--line)} .guide .slots li:first-child{border-top:0} .guide .slots b{font-variant-numeric:tabular-nums;color:var(--accent);width:14px} .guide .cta{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:700;padding:12px 20px;border-radius:var(--radius-sm);margin-top:10px} /* Message-emoji grid (guides/emojis), grouped by category. Small 16x16 art, scaled up crisp; a wider grid than the reading column so the codes fit. Cells are buttons that copy their code on tap. */ #emoji-cats{max-width:none} /* Sticky category nav (shell/catnav.js). top is set in JS to clear the chrome header. */ .catnav{position:sticky;z-index:30;display:flex;gap:8px;margin:6px 0 4px;padding:8px 0;overflow-x:auto;scrollbar-width:none;background:var(--bg)} .catnav::-webkit-scrollbar{display:none} .catnav__chip{flex:0 0 auto;display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none;font-size:13px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:6px 14px;box-shadow:var(--sh-sm);transition:color .12s,border-color .12s} .catnav__chip:hover{color:var(--accent-strong);border-color:var(--line-strong)} .catnav__chip[aria-current="true"]{color:var(--accent);border-color:var(--accent);font-weight:600} .catsec h2{margin-top:26px} .guide .catsec:first-child h2{margin-top:8px} .guide .emgrid{max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:12px 0 8px} .emcell{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--sh-sm);transition:box-shadow .12s,border-color .12s} .emcell:hover{box-shadow:var(--sh);border-color:var(--line-strong)} /* an open cell rises above its neighbours; its bottom corners square off so the dropdown reads as the same box growing downward, not a separate floating panel */ .emcell:hover,.emcell:focus-within{z-index:6} .emcell.has-aliases:hover,.emcell.has-aliases:focus-within{border-bottom-left-radius:0;border-bottom-right-radius:0} /* the always-visible face + primary code */ .emmain{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;width:100%;padding:12px 8px;font:inherit;color:inherit;text-align:center;background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;-webkit-appearance:none;appearance:none} /* tuck the primary closer to its dropdown when there is one */ .emcell.has-aliases .emmain{padding-bottom:7px} .emcell img{width:32px;height:32px;image-rendering:pixelated;object-fit:contain} .emcell.noart img{visibility:hidden} .emcell code{font-family:var(--mono);font-size:11px;line-height:1.3;color:var(--accent);word-break:break-all} .emmain.copied code{color:var(--ok)} /* primary code with a small inline "+N" hint that the picture has more codes */ .emcodeline{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:4px} .emmore{font-family:var(--mono);font-size:9px;color:var(--muted)} .emmain.copied .emmore{display:none} /* the dropdown: continues the cell — exact same width (left/right -1px lines up the borders), flush against the bottom, and SLIDES open. The height animates via a grid 0fr -> 1fr on the inner wrapper, so it eases smoothly no matter how many codes a picture has. */ .empanel{position:absolute;left:-1px;right:-1px;top:100%;z-index:6;display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .22s ease,opacity .16s ease,visibility 0s linear .22s} .emcell:hover .empanel,.emcell:focus-within .empanel{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .22s ease,opacity .16s ease,visibility 0s} /* a copy click closes the dropdown even while the cell is still hovered/focused (JS adds .dismiss on copy and clears it when the pointer leaves) */ .emcell.dismiss .empanel{grid-template-rows:0fr;opacity:0;visibility:hidden} .emcell.has-aliases.dismiss:hover,.emcell.has-aliases.dismiss:focus-within{border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)} .empinner{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:0;padding:3px;background:var(--surface);border:1px solid var(--line-strong);border-top:0;border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:0 16px 22px -10px var(--canvas-sh)} .empitem{display:block;width:100%;text-align:center;background:none;border:0;border-radius:6px;padding:3px 4px;cursor:pointer;font:inherit;line-height:1.25;-webkit-appearance:none;appearance:none} .empitem code{font-size:11px;line-height:1.25;word-break:break-all} .empitem.copied code{color:var(--ok)} /* owner wants UI motion to always play, so re-assert the slide under the reduced-motion kill-switch (the global *{animation/transition:none} would otherwise drop it) */ @media (prefers-reduced-motion:reduce){ .empanel{transition:grid-template-rows .22s ease,opacity .16s ease,visibility 0s linear .22s!important} .emcell:hover .empanel,.emcell:focus-within .empanel{transition:grid-template-rows .22s ease,opacity .16s ease,visibility 0s!important} } @media (max-width:560px){.guide .emgrid{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px}.emcell code{font-size:10.5px}} /* ---------- graphic-templates guide (/guides/templates) ---------- */ /* Pixuf, the pixel font the generated hat/accessory templates draw their DRAWUNDER/ICON labels in (same one the Workbench uses; canvas-only, so the page passes fontReady once it loads). */ @font-face{font-family:"Pixuf";src:url("/workbench/pixuf.woff2") format("woff2");font-display:swap} /* Templates are the hero: each is shown large + crisp (integer-zoomed to fit, never below its real pixels), centred like a figure in a tutorial. The Save button + right-click keep it; a light hover tooltip carries the secondary "what is this cell" detail so it never competes with the sheet. */ .tsec{margin:0 0 10px} .tsec__bar{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap;margin:30px 0 5px} .tsec__bar h2{margin:0} .tsec__meta{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums} .tsec__desc{margin:0 0 12px;line-height:1.55;max-width:66ch;color:var(--ink)} .tsec__note{margin:0 0 10px;font-size:12.5px;color:var(--accent);min-height:1em} .tsec__note:empty{display:none} .tbtn{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:var(--raised);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:7px 13px;cursor:pointer;transition:border-color .12s,color .12s} .tbtn:hover{border-color:var(--accent);color:var(--accent)} .tbtn--save{margin-left:auto;background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .tbtn--save:hover{color:var(--accent-ink);filter:brightness(1.05)} .tbtn--ghost{font-weight:500;font-size:12.5px;padding:6px 11px} .tstagewrap{display:flex;justify-content:center;padding:4px 0 2px} .tstage{position:relative;display:inline-block;font-size:0;max-width:100%} .timg{display:block;image-rendering:pixelated;max-width:100%;height:auto;background:var(--raised);box-shadow:0 0 0 1px var(--line),var(--sh)} /* square corners: a template is a precise grid, no rounding */ .tstage.drop .timg{box-shadow:0 0 0 2px var(--accent),var(--sh)} .thl{position:absolute;pointer-events:none;box-sizing:border-box;display:none;box-shadow:inset 0 0 0 2px var(--accent-strong)} .tdropcue{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--accent);background:var(--surface);opacity:.9} .tstage.drop .tdropcue{display:flex} /* resize handles: a small square grip sitting just OUTSIDE each corner, its inner corner touching the template (offset = the grip's own size, so the edge nearest the template lands exactly on the template edge) */ .tgrip{position:absolute;width:9px;height:9px;box-sizing:border-box;background:var(--surface);border:1px solid var(--ink);touch-action:none;z-index:2} .tgrip--nw{left:-9px;top:-9px;cursor:nwse-resize} .tgrip--ne{right:-9px;top:-9px;cursor:nesw-resize} .tgrip--sw{left:-9px;bottom:-9px;cursor:nesw-resize} .tgrip--se{right:-9px;bottom:-9px;cursor:nwse-resize} /* the secondary hover tooltip: the cell's name, a one-liner, and that exact frame frozen on the character */ .tpltip{position:fixed;z-index:60;display:none;gap:11px;align-items:center;max-width:250px;padding:9px 11px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-sm);box-shadow:var(--sh);pointer-events:none} .tpltip.on{display:flex} .tpltip__cv{image-rendering:pixelated;flex:0 0 auto} .tpltip__txt{display:flex;flex-direction:column;gap:2px;min-width:0} .tpltip__name{font-size:13.5px} .tpltip__desc{font-size:12px;color:var(--muted);line-height:1.4} @media (max-width:560px){.tsec__bar{margin-top:24px}.tbtn--save{margin-left:0}} /* ---------- sprite primitives (checker reserved for the editor preview) ---------- */ .checker{background-image: linear-gradient(45deg,var(--chk1) 25%,transparent 25%),linear-gradient(-45deg,var(--chk1) 25%,transparent 25%), linear-gradient(45deg,transparent 75%,var(--chk1) 75%),linear-gradient(-45deg,transparent 75%,var(--chk1) 75%); background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--chk2)} .badge-new{position:absolute;z-index:2;top:8px;left:8px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--sel-ink);background:var(--sel);border-radius:6px;padding:2px 8px;box-shadow:var(--sh-sm)} footer.site{position:sticky;top:100vh;top:100dvh;background:var(--raised);border-top:1px solid var(--line)} footer.site .footwrap{max-width:var(--maxw);margin:0 auto;padding:40px 22px} footer.site .footbrand{margin:0 0 16px;font-family:var(--mono);font-size:16px;letter-spacing:-.01em;color:var(--ink)} footer.site .footbrand b{color:var(--accent);font-weight:inherit} footer.site .footcols{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:18px 64px} footer.site .footlove{flex:1 1 440px;max-width:600px;margin:0;color:var(--muted);font-size:13.5px;line-height:1.75;text-wrap:pretty} footer.site .footlove i{font-style:italic;color:var(--ink);white-space:nowrap} footer.site .footlove b{font-weight:600;color:var(--ink);white-space:nowrap} footer.site .footnote{flex:0 1 260px;margin:0;color:var(--muted);opacity:.7;font-size:12px;line-height:1.7} @media(max-width:700px){footer.site .footnote{flex-basis:100%}footer.site .footbreak{display:none}} @media (max-width:560px){ .chrome{flex-wrap:wrap;row-gap:10px;padding:10px 12px;gap:8px} .brand{order:1} .brand .word{font-size:16px} .cog{order:2;margin-left:auto} .navpill{order:3;flex-basis:100%;margin-left:0} .navpill a{padding:0 12px} .page{padding:20px 14px 56px} .page h1{font-size:25px} } @media (hover:none){ .toggle,.btn{padding-top:10px;padding-bottom:10px} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } @media (prefers-reduced-motion:reduce){ .expair{transition:opacity .6s ease!important} } /* examples rotate regardless */ @media (prefers-reduced-motion:reduce){ .drawer{transition:transform .3s ease!important} .drawer .body>*{opacity:1!important;transform:none!important} .cog{transition:background-color .25s,color .25s!important} .cog svg{transition:transform .35s ease!important} .scrim{transition:opacity .18s ease,visibility .18s!important} } @media (prefers-reduced-motion:reduce){ .seg__thumb,.seg__thumbLabels{transition:transform .22s cubic-bezier(.34,1.1,.5,1),width .22s cubic-bezier(.34,1.1,.5,1)!important} } /* heart "pop" when you like a code (jump a touch big, settle). The owner wants motion to always play, so re-assert it under prefers-reduced-motion (the global * rule above would otherwise kill it). */ @keyframes heartpop{0%{transform:scale(1)}30%{transform:scale(1.35)}55%{transform:scale(.9)}100%{transform:scale(1)}} .heart.pulse{animation:heartpop .32s ease} @media (prefers-reduced-motion:reduce){ .heart.pulse{animation:heartpop .32s ease!important} } /* language FOUC guard: non-English users see no English flash; failsafe reveal if scripts fail */ .i18n-pending [data-i18n]{visibility:hidden;animation:i18nshow 0s 2.5s forwards} @keyframes i18nshow{to{visibility:visible}} /* native typography per language */ html:lang(ja){--ui:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",system-ui,sans-serif} /* seg transitions stay off until the page has settled, so nothing animates into place on load */ html:not(.segs-ready) .seg__thumb,html:not(.segs-ready) .seg__thumbLabels{transition:none!important} /* ---- hero ---- */ .hero{max-width:var(--maxw);margin:0 auto;padding:18px 16px 26px} .hero__panel{position:relative;background:var(--accent-weak);border-radius:26px;padding:34px 38px 30px;padding-right:320px;min-height:200px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box} .hero__tailorWrap{position:absolute;right:72px;bottom:-43px;height:229px;pointer-events:none;user-select:none;z-index:1} .hero__tailorWrap.pose-all{right:114px} .hero__tailor{display:block;height:100%;width:auto;aspect-ratio:372/520;object-fit:contain} .pose-shield .hero__tailor{aspect-ratio:552/520} .pose-sword .hero__tailor{aspect-ratio:661/520} .pose-tools .hero__tailor{aspect-ratio:534/520} .pose-guides .hero__tailor{aspect-ratio:344/520} .pose-links .hero__tailor{aspect-ratio:471/520} .hero__tailorWrap.pose-shield{height:212px;bottom:0} .hero__tailorWrap.pose-tools{height:225px;bottom:-7px;right:80px} .pose-tools .hero__tailor{clip-path:inset(0 0 7px 0)} .hero__tailorWrap.pose-guides{height:206px;bottom:0;right:127px} .hero__tailorWrap.pose-links{height:208px;bottom:0;right:101px} .hero__tailorWrap.pose-sword{height:210px;bottom:0} .hero h1{font-size:34px;letter-spacing:-.02em;margin:0 0 6px;position:relative} .hero .count{margin:0 0 8px;font-weight:700;font-size:15.5px;color:var(--accent);position:relative} .hero .lead{margin:0;font-size:14.5px;color:var(--muted);max-width:560px;position:relative} @media (max-width:720px){.hero__panel{padding-right:196px;min-height:176px}.hero__tailorWrap{height:197px;right:40px;bottom:-39px}.hero__tailorWrap.pose-shield{height:182px;bottom:0}.hero__tailorWrap.pose-sword{height:180px;bottom:0}.hero__tailorWrap.pose-tools{height:193px;bottom:-6px}.pose-tools .hero__tailor{clip-path:inset(0 0 6px 0)}.hero__tailorWrap.pose-guides{height:177px;bottom:0}.hero__tailorWrap.pose-links{height:178px;bottom:0}.hero__panel .hero__tailorWrap{right:40px}} @media (max-width:560px){.hero__panel{padding:22px 20px 18px;padding-right:116px;border-radius:20px;min-height:140px}.hero h1{font-size:24px}.hero__tailorWrap{height:153px;right:14px;bottom:-31px}.hero__tailorWrap.pose-shield{height:142px;bottom:0}.hero__tailorWrap.pose-sword{height:140px;bottom:0}.hero__tailorWrap.pose-tools{height:151px;bottom:-5px}.pose-tools .hero__tailor{clip-path:inset(0 0 5px 0)}.hero__tailorWrap.pose-guides{height:138px;bottom:0}.hero__tailorWrap.pose-links{height:139px;bottom:0}.hero__panel .hero__tailorWrap{right:14px}} /* ---- link thumbnails ---- */ .withthumb{display:flex;gap:16px;align-items:center} .withthumb .linkbody{min-width:0} .linkthumb{flex:none;width:56px;height:56px;border-radius:14px;display:block;background:var(--raised)} @media (max-width:560px){.linkthumb{width:48px;height:48px;border-radius:12px}} /* ---- settings rows: inline edit pop, per-page collapse ---- */ .setrow{display:flex;gap:10px;align-items:center} .setrow .seg{flex:0 1 auto} .setrow .seg button{padding:0 20px} .setrow .btn{margin-left:auto} .sethr{border:0;border-top:1px solid var(--line);margin:16px 0 12px} .btn.pop{transition:transform .32s cubic-bezier(.3,1.3,.4,1),opacity .18s ease} .btn.pop.gone{transform:scale(.4);opacity:0;pointer-events:none} .collapse{display:grid;grid-template-rows:1fr;transition:grid-template-rows .34s cubic-bezier(.33,1.12,.45,1)} .collapse.closed{grid-template-rows:0fr} .collapse>div{overflow:hidden;min-height:0} .hint--lead{margin:0 0 12px;line-height:1.4} .setlbl{margin-bottom:2px} @media (prefers-reduced-motion:reduce){.btn.pop,.collapse{transition:none!important}} /* ---- details modal ---- */ .gmodal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px} .gmodal[hidden]{display:none} .gmodal .gscrim{position:absolute;inset:0;background:rgba(10,10,8,.4);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .24s ease} .gmodal.open .gscrim{opacity:1} .gdialog{position:relative;background:var(--bg);border:1px solid var(--line-strong);border-radius:22px;padding:20px 22px 18px;width:min(92vw,620px);max-height:calc(100dvh - 32px);overflow-y:auto;box-sizing:border-box;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .22s ease,transform .34s cubic-bezier(.3,1.25,.4,1)} .gmodal.open .gdialog{opacity:1;transform:none} .gclose{position:absolute;top:10px;right:12px;border:0;background:none;color:var(--muted);font-size:26px;line-height:1;width:36px;height:36px;border-radius:50%;cursor:pointer} .gclose:hover{background:var(--raised);color:var(--ink)} .gname{margin:0 24px 2px 0;font-size:19px} .gcodeline{margin:0 0 14px} .gcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--muted);word-break:break-all} .gdateline{margin:-8px 0 14px;font-size:12px;color:var(--muted)} .glegacy{margin:-4px 0 14px;padding:8px 12px;border:1px solid var(--line-strong);border-left:3px solid var(--accent,#c8923c);border-radius:10px;font-size:12.5px;line-height:1.45;color:var(--muted)} .gviews{display:grid;grid-template-columns:1fr 1fr;gap:14px} .gviews figure{margin:0;text-align:center} .gviews figcaption{font-size:12.5px;color:var(--muted);margin-top:7px} .gstage{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:200px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} /* The modal's on-character view (drawn at 2x) is the detail view, so here we DO scale to fit — an oversized shield shows whole rather than clipped: max-width caps it to the figure column, height:auto keeps aspect (beats place()'s inline px). minmax(0,1fr) above makes the column definite so max-width binds and place-items:center centres it. (Cards instead keep the figure at natural size and clip — see .stage in index.html. The raw panel shows the complete art either way.) The column is wide enough (~280px) that fitting still renders the figure above 1:1. */ .gstage>.pose,.gstage>.pose>canvas{max-width:100%;height:auto!important} /* the figure renders at a baked 2x (gallery.js sets pose._mag) — pixel-perfect, no fractional CSS zoom. the stage grows to fit it (most shields land ~196px tall at 2x) instead of a fixed height that would clip. */ .graw{image-rendering:pixelated;max-width:92%;max-height:170px;height:auto} .gactions{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:16px} .gnav{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:20px;line-height:1;cursor:pointer} .gnav:hover{background:var(--raised)} .gopenrow{display:flex;justify-content:center;margin-top:10px} /* Operator-only "Collections" panel in the code modal (revealed by gallery.js when window.GRAAL_HC is set). A compact switch per collection; the on-state fills accent. Hidden entirely for the public. */ .gcoll{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)} .gcoll[hidden]{display:none} .gcoll__head{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 2px 9px;text-align:center} .gcoll__row{display:flex;flex-wrap:wrap;gap:7px;justify-content:center} .gcoll__item{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--pill);cursor:pointer;transition:background .12s,border-color .12s,color .12s,transform .1s} .gcoll__item:hover{border-color:var(--accent-mid);color:var(--ink)} .gcoll__item:active{transform:scale(.95)} .gcoll__item.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .gcoll__item .em{font-size:14px;line-height:1;filter:grayscale(.6);opacity:.7} .gcoll__item.on .em{filter:none;opacity:1} .gopen{display:inline-flex;align-items:center;gap:7px} .gopen svg{width:16px;height:16px} @media (max-width:560px){.gviews{grid-template-columns:1fr}.gstage{min-height:180px}.gdialog{padding:16px 14px 14px}} @media (prefers-reduced-motion:reduce){.gdialog{transition:opacity .18s ease!important;transform:none}}