/* 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; --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); 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; --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); 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;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)} .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} .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} .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} /* ---------- 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;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{max-width:var(--maxw);margin:0 auto;padding:26px 18px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)} footer.site b{color:var(--ink);font-weight:600} @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){ .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} } /* 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__blush{position:absolute;left:33.82%;top:28.87%;width:29.1%;height:auto;opacity:0;transition:opacity .8s ease;pointer-events:none} .hero__blush.on{opacity:1} .hero__face{position:absolute;left:24.5%;top:5.6%;width:47.7%;height:35.5%;pointer-events:auto} .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} .pose-shield .hero__blush{left:16.9%;top:23.28%;width:20.31%} .pose-shield .hero__face{left:10.4%;top:0;width:33.3%;height:43.3%} .hero__tailorWrap.pose-sword{height:210px;bottom:0} .pose-sword .hero__blush{left:42.07%;top:27.6%;width:17.56%} .pose-sword .hero__face{left:36.6%;top:3.2%;width:28.5%;height:37.5%} .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} .pose-guides .hero__blush{left:34.94%;top:28.51%;width:33.69%} .pose-guides .hero__face{left:24.2%;top:3.7%;width:55.1%;height:37.7%} .pose-links .hero__blush{left:26.67%;top:27.55%;width:25.5%} .pose-links .hero__face{left:18.9%;top:2.9%;width:41%;height:37.9%} @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);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} .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;place-items:center;height:190px;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} .gpose{transform:scale(1.45)} .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)} @media (max-width:560px){.gviews{grid-template-columns:1fr}.gstage{height:160px}.gdialog{padding:16px 14px 14px}} @media (prefers-reduced-motion:reduce){.gdialog{transition:opacity .18s ease!important;transform:none}}