:root{color-scheme:light;--canvas:oklch(1 0 0);--paper:oklch(1 0 0);--surface:oklch(0.95 0 0);--ink:oklch(0.17 0 0);--ink-soft:oklch(0.37 0 0);--ink-muted:oklch(0.5 0 0);--line:oklch(0.2 0 0/0.22);--line-strong:oklch(0.2 0 0/0.52);--brand:oklch(0.61 0.24 28);--brand-strong:oklch(0.51 0.22 27);--brand-fill:oklch(0.57 0.23 28);--brand-ink:oklch(1 0 0);--acid:oklch(0.82 0.19 132);--violet:oklch(0.68 0.16 307);--accent-ink:oklch(0.15 0 0);--focus:oklch(0.58 0.22 248);--shadow:oklch(0 0 0/0.14);--font-sans:ui-sans-serif,system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--text-micro:0.75rem;--text-label:0.8125rem;--text-small:0.9375rem;--text-body:1rem;--text-lead:clamp(1.0625rem,0.5vw + 0.9rem,1.1875rem);--text-title:1.25rem;--text-heading:clamp(1.875rem,1.2vw + 1.4rem,2.625rem);--text-contact:clamp(2rem,2vw + 1.2rem,3.25rem);--text-hero:clamp(2.25rem,2.6vw + 1.2rem,4rem);--text-rule-number:clamp(3.5rem,7vw,6.5rem);--leading-label:1.3;--leading-compact:1.5;--leading-body:1.75;--leading-heading:1.25;--leading-display:1.18;--tracking-display:-0.01em;--tracking-label:0.06em;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:2.5rem;--space-8:3rem;--space-10:5.5rem;--page-inset:clamp(2rem,6vw,4rem);--container-max:82.5rem;--section-space:clamp(4rem,7vw,6.5rem);--measure-copy:37rem;--measure-hero:32rem}.dark{color-scheme:dark;--canvas:oklch(0 0 0);--paper:oklch(0.13 0 0);--surface:oklch(0.2 0 0);--ink:oklch(0.97 0 0);--ink-soft:oklch(0.82 0 0);--ink-muted:oklch(0.7 0 0);--line:oklch(0.95 0 0/0.26);--line-strong:oklch(0.95 0 0/0.5);--brand:oklch(0.7 0.22 31);--brand-strong:oklch(0.78 0.19 38);--brand-fill:var(--brand);--brand-ink:oklch(0.1 0 0);--acid:oklch(0.83 0.18 132);--violet:oklch(0.75 0.15 307);--focus:oklch(0.77 0.15 235);--shadow:oklch(0 0 0/0.5)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a,button{-webkit-tap-highlight-color:transparent}button{font:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}::selection{background:var(--brand);color:var(--brand-ink)}.site-shell{position:relative;min-height:100vh;overflow:hidden;background:var(--canvas)}.site-shell>footer,.site-shell>main{position:relative;z-index:1}.skip-link{position:fixed;z-index:100;left:1rem;top:-5rem;padding:.7rem 1rem;border:0;border-radius:.6rem;background:var(--ink);color:var(--paper);font-weight:700;cursor:pointer}.skip-link:focus{top:1rem}.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:color-mix(in oklch,var(--canvas) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.section-inner,.topbar{width:min(var(--container-max),calc(100% - var(--page-inset)));margin:0 auto}.topbar{min-height:4.7rem;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.brand-lockup{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--ink);text-decoration:none;font-weight:700;letter-spacing:0}.brand-mark{display:block;width:2.5rem;height:2.5rem;color:currentColor}.brand-mark img{display:block;width:100%;height:100%}.brand-mark .brand-logo-dark,html.dark .brand-mark .brand-logo-light{display:none}html.dark .brand-mark .brand-logo-dark{display:block}.desktop-nav{display:flex;gap:var(--space-1);align-items:center}.desktop-nav a,.desktop-nav button,.theme-toggle{color:var(--ink-soft);font-size:var(--text-small);font-weight:700}.desktop-nav a,.desktop-nav button{padding:var(--space-2) var(--space-3);border:0;background:transparent;text-decoration:none;cursor:pointer}.desktop-nav a:hover,.desktop-nav button:hover{color:var(--brand-strong)}.theme-toggle{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--line-strong);border-radius:999px;background:var(--paper);cursor:pointer}.theme-toggle:hover{background:var(--surface);color:var(--ink)}.hero{position:relative;isolation:isolate;padding:clamp(2.5rem,4vw,4rem) 0 clamp(2.5rem,4vw,3.5rem)}.hero:before{content:"";position:absolute;z-index:0;width:clamp(28rem,40vw,44rem);aspect-ratio:1;top:-2rem;right:-6rem;background-image:radial-gradient(circle,color-mix(in oklch,var(--brand) 68%,transparent) 0 1.9px,transparent 2.2px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse at 64% 50%,#000 0 48%,transparent 82%);mask-image:radial-gradient(ellipse at 64% 50%,#000 0 48%,transparent 82%);opacity:.4;transform:rotate(8deg);animation:hero-halftone-drift 14s ease-in-out infinite alternate;pointer-events:none}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;grid-gap:clamp(1.5rem,2.5vw,2.5rem);gap:clamp(1.5rem,2.5vw,2.5rem);text-align:left}.hero-grid>div:first-child{display:flex;max-width:none;min-width:0;flex-direction:column;align-items:flex-start}.hero h1{max-width:none;margin:0;font-size:var(--text-hero);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:700}.hero h1 em{position:relative;display:inline-block;margin-top:var(--space-1);font-style:normal;color:var(--brand)}.hanging-punctuation{position:absolute}.hero h1 em:after{content:"";position:absolute;left:.05em;right:-.04em;bottom:.04em;height:.14em;z-index:-1;background:var(--acid);transform:rotate(-2deg)}.hero-copy{max-width:var(--measure-hero);margin:var(--space-6) 0 0;color:var(--ink-soft);font-size:var(--text-lead);line-height:var(--leading-body)}.hero-actions{display:flex;width:100%;flex-wrap:wrap;justify-content:flex-start;gap:var(--space-3);margin-top:var(--space-7)}.action{display:inline-flex;align-items:center;justify-content:center;gap:.48rem;min-height:2.85rem;padding:.7rem 1rem;border:1px solid transparent;border-radius:.45rem .85rem .55rem .75rem;white-space:nowrap;text-decoration:none;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.action:hover{transform:translate(-2px,-2px)}.action-primary{background:var(--brand-fill);color:var(--brand-ink);box-shadow:4px 4px 0 var(--ink)}.action-primary:hover{background:var(--brand-strong);box-shadow:6px 6px 0 var(--ink)}.action-secondary{border-color:var(--line-strong);background:var(--paper);color:var(--ink)}.action-secondary:hover{background:var(--surface)}.mascot-stage{position:relative;width:100%;max-width:32rem;margin:0;justify-self:end;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.mascot-button{position:relative;z-index:3;width:100%;aspect-ratio:1;padding:0;border:0;background:transparent;cursor:pointer}.mascot-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2) var(--space-4);text-align:center}.mascot-caption{color:var(--ink-soft);font:700 var(--text-label)/var(--leading-label) var(--font-mono);margin:0}.mascot-caption strong{color:var(--brand-strong)}.quote{position:absolute;top:0;right:0;z-index:10;max-width:12rem;margin:0;padding:.78rem .92rem;border:2px solid var(--ink);border-radius:1rem .35rem 1rem .45rem;background:var(--paper);color:var(--ink);font-size:var(--text-small);font-weight:700;line-height:var(--leading-compact);transform:rotate(2deg);box-shadow:5px 5px 0 var(--acid)}.quote>span{display:inline-block;animation:quote-pop .42s cubic-bezier(.2,1.35,.35,1)}.mascot-image,.mascot-motion{display:block;width:100%}.mascot-image{height:auto;filter:drop-shadow(9px 11px 0 var(--shadow));transform:none;transition:transform .22s ease}.mascot-button:hover .mascot-image{transform:scale(1.03) rotate(-2deg)}.mascot-button.is-popping .mascot-motion{animation:dragon-shake .65s cubic-bezier(.2,1.4,.45,1);filter:drop-shadow(0 0 1.15rem color-mix(in oklch,var(--acid) 72%,transparent))}.bubble-orbit{position:absolute;inset:0;z-index:8;pointer-events:none}.pop-bubble{position:absolute;display:grid;place-items:center;border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--brand);font:700 var(--text-label)/var(--leading-label) var(--font-mono);letter-spacing:var(--tracking-label);opacity:0;animation:bubble-float 3.8s ease-in-out infinite}.bubble-one{width:4.2rem;height:2.25rem;left:-1.3rem;top:18%;border-radius:48% 52% 43% 57%;transform:rotate(-9deg)}.bubble-two{width:5.3rem;height:2.2rem;right:calc(var(--space-10) + var(--space-2));bottom:21%;border-radius:.35rem .8rem .35rem .8rem;animation-delay:-.9s;transform:rotate(8deg)}.is-roaring .pop-bubble{animation:bubble-burst .65s cubic-bezier(.16,1.3,.3,1)}.is-roaring .quote{animation:quote-burst .65s cubic-bezier(.16,1.35,.3,1)}.poke-counter{margin:0;padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink-soft);font:700 var(--text-label)/var(--leading-label) var(--font-mono);box-shadow:3px 3px 0 var(--brand)}.poke-counter strong{color:var(--brand-strong);font-size:1.05em}.ticker{position:relative;isolation:isolate;min-height:7.2rem;margin:calc(var(--space-4) * -1) calc(var(--space-5) * -1) 0;padding:2.3rem var(--space-5);overflow:hidden;white-space:nowrap}.ticker:before{inset:.15rem -2rem .2rem;-webkit-clip-path:polygon(0 0,100% 38%,100% 62%,0 100%);clip-path:polygon(0 0,100% 38%,100% 62%,0 100%);filter:drop-shadow(0 2px 0 color-mix(in oklch,var(--ink) 65%,transparent))}.ticker:after,.ticker:before{content:"";position:absolute;z-index:-1;background:var(--acid)}.ticker:after{width:.9rem;height:.9rem;left:.7vw;top:.05rem;border-radius:48% 52% 35% 65%;box-shadow:1.35rem 6.15rem 0 -.12rem var(--acid),2.25rem .3rem 0 -.2rem var(--acid),3.1rem 6.35rem 0 -.28rem var(--acid)}.ticker-track{position:relative;z-index:1;display:inline-flex;padding:var(--space-3) 0;color:var(--accent-ink);font:700 var(--text-small)/var(--leading-label) var(--font-mono);letter-spacing:var(--tracking-label);animation:ticker 80s linear infinite}.ticker-half{display:flex;flex:none}.ticker-item{flex:none}.ticker-item:after{content:"✦";margin:0 var(--space-5)}.section h2{display:inline-block;max-width:none;margin:0;font-size:var(--text-heading);line-height:var(--leading-heading);letter-spacing:0}.section{padding:var(--section-space) 0;border-bottom:1px solid var(--line)}.section-intro{max-width:var(--measure-copy);margin:var(--space-5) 0 0;color:var(--ink-soft);line-height:var(--leading-body)}.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:var(--space-4);gap:var(--space-4);margin-top:var(--space-8)}.rule{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;padding:var(--space-6) var(--space-6) var(--space-8) clamp(5.2rem,10vw,8.25rem);border:0;border-top:3px solid var(--ink);border-bottom:1px solid var(--line);border-radius:0;background:linear-gradient(135deg,transparent 0 1.25rem,var(--paper) 1.3rem);box-shadow:inset 0 0 0 1px var(--line)}.rule:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line),0 6px 0 var(--acid)}.rule:after{content:"";position:absolute;right:var(--space-5);bottom:var(--space-4);width:2.5rem;height:.42rem;background:var(--acid);transform:skewX(-24deg)}.rule-number{position:absolute;top:var(--space-4);left:var(--space-5);color:color-mix(in oklch,var(--ink) 7%,transparent);font:700 var(--text-rule-number)/.9 var(--font-mono);letter-spacing:-.1em}.rule h3{margin:var(--space-2) 0 var(--space-2);font-size:var(--text-title);line-height:1.4;letter-spacing:0}.rule p{margin:0;color:var(--ink-soft);font-size:var(--text-small);line-height:var(--leading-body)}.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:0;gap:0;margin-top:var(--space-8)}.lab{display:flex;flex-direction:column;min-width:0;padding:var(--space-5) var(--space-6) var(--space-5) 0;border:0;border-top:2px solid var(--ink);background:transparent;transition:transform .18s ease,box-shadow .18s ease}.lab:hover{transform:translateY(-2px)}.lab+.lab{padding-left:var(--space-6);border-left:1px solid var(--line)}.lab h3{margin:0 0 var(--space-2);font-size:var(--text-title);line-height:1.4;letter-spacing:0}.lab p{margin:0;color:var(--ink-soft);font-size:var(--text-small);line-height:var(--leading-body)}.tag-list{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:auto;padding-top:var(--space-5)}.tag{padding:.27rem .42rem;border:1px solid var(--line);border-radius:.25rem .45rem .25rem .45rem;color:var(--ink-soft);font:700 var(--text-micro)/var(--leading-label) var(--font-mono)}.contact{padding:var(--section-space) 0;text-align:center}.contact h2{margin:0 auto;max-width:22ch;font-size:var(--text-contact);line-height:var(--leading-heading);letter-spacing:var(--tracking-display)}.contact p{max-width:34rem;margin:var(--space-5) auto 0;color:var(--ink-soft);font-size:var(--text-lead);line-height:var(--leading-body)}.email-line{display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;padding:var(--space-2);border:1px solid var(--line);border-radius:.7rem 1rem .7rem 1rem;background:var(--paper);box-shadow:4px 4px 0 var(--violet)}.email-line span{padding:0 var(--space-2);overflow-wrap:anywhere;font:700 var(--text-small)/var(--leading-compact) var(--font-mono)}.icon-button{display:grid;width:2.3rem;height:2.3rem;flex:0 0 auto;place-items:center;border:0;border-radius:.4rem .7rem .4rem .7rem;background:var(--acid);color:var(--accent-ink);cursor:pointer}.email-wrap{position:relative;display:inline-block;max-width:100%;margin-top:var(--space-7)}.email-wrap .copy-status{--sticker-x:-50%;position:absolute;left:50%;bottom:calc(100% - .7rem);margin:0;padding:.35rem .7rem;border:2px solid var(--ink);border-radius:.3rem .8rem .3rem .8rem;background:var(--violet);color:var(--accent-ink);font:700 var(--text-small)/var(--leading-label) var(--font-mono);white-space:nowrap;opacity:0;transform:translate(-50%,.6rem) rotate(-4deg) scale(.7);pointer-events:none}.email-wrap .copy-status.is-visible{animation:sticker-pop .5s cubic-bezier(.2,1.4,.3,1) forwards}.idle-note{--sticker-rotate:3deg;position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:30;margin:0;padding:.55rem .85rem;border:2px solid var(--ink);border-radius:.3rem .9rem .3rem .9rem;background:var(--acid);color:var(--accent-ink);font:700 var(--text-small)/var(--leading-label) var(--font-mono);box-shadow:3px 3px 0 var(--brand);opacity:0;transform:translateY(.6rem) rotate(3deg) scale(.7);pointer-events:none}.idle-note.is-visible{animation:sticker-pop .5s cubic-bezier(.2,1.4,.3,1) forwards}@keyframes sticker-pop{0%{opacity:0}to{opacity:1;transform:translate(var(--sticker-x,0)) rotate(var(--sticker-rotate,-4deg)) scale(1)}}.not-found{padding:var(--section-space) 0;text-align:center}.not-found-code{display:inline-block;padding:.1em .35em;background:linear-gradient(135deg,transparent 0 .6em,var(--violet) .62em);color:var(--accent-ink);font:700 clamp(4rem,12vw,8rem)/1 var(--font-mono);letter-spacing:-.08em}.not-found h1{margin:var(--space-6) auto 0;max-width:22ch;font-size:var(--text-contact);line-height:var(--leading-heading);letter-spacing:var(--tracking-display)}.not-found p{max-width:34rem;margin:var(--space-5) auto 0;color:var(--ink-soft);font-size:var(--text-lead);line-height:var(--leading-body)}.not-found .hero-actions{justify-content:center}.site-footer{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;border-top:1px solid var(--line);color:var(--ink-muted);font-size:var(--text-label)}@keyframes dragon-shake{0%,to{transform:rotate(1deg) scale(1.06)}18%{transform:translate(-5px,2px) rotate(-4deg) scaleX(1.08) scaleY(.96)}35%{transform:translate(5px,-2px) rotate(5deg) scaleX(.96) scaleY(1.12)}52%{transform:translate(-4px,1px) rotate(-3deg) scaleX(1.07) scaleY(.98)}72%{transform:translate(3px,-1px) rotate(3deg) scale(1.11)}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes bubble-float{0%,to{translate:0 0}50%{translate:0 -.55rem}}@keyframes bubble-burst{0%{scale:.72;opacity:.2}55%{scale:1.24;opacity:1}to{scale:1;opacity:1}}@keyframes quote-pop{0%{scale:.8;opacity:0}}@keyframes quote-burst{0%{scale:.8;rotate:-5deg}60%{scale:1.13;rotate:3deg}to{scale:1;rotate:0deg}}@keyframes hero-halftone-drift{0%{background-position:0 0;transform:translateZ(0) rotate(8deg) scale(.96)}50%{background-position:8px -7px}to{background-position:15px -15px;transform:translate3d(-1.6rem,1.1rem,0) rotate(-3deg) scale(1.04)}}@media (min-width:1101px){.desktop-nav button,.poke-counter,.theme-toggle{white-space:nowrap}}@media (max-width:1100px) and (min-width:761px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mascot-stage{max-width:26rem}}@media (max-width:760px){.desktop-nav:not(.back-nav){display:none}.topbar{gap:var(--space-3)}.back-nav a,.brand-lockup,.theme-toggle{white-space:nowrap}.back-nav a{padding-inline:0}.hero-grid{grid-template-columns:minmax(0,1fr)}.hero:before{width:19rem;top:44%;right:-6rem;opacity:.42}.mascot-stage{max-width:min(20rem,100%);justify-self:center;margin-top:var(--space-6);padding-top:6.5rem}.quote{max-width:10rem}.mascot-caption strong{display:block;margin-bottom:var(--space-1)}.hero-actions .action{flex:1 1 100%}.ticker{min-height:5.6rem;padding:1.55rem 1.5rem}.lab-grid,.rule-grid{grid-template-columns:1fr}.lab+.lab{padding-left:0;border-left:0}.rule{padding:var(--space-5) var(--space-5) var(--space-7)}.rule-number{position:static;display:block;margin-bottom:var(--space-2);font-size:clamp(3rem,16vw,4.5rem)}.site-footer{flex-direction:column}:root{--section-space:2.5rem;--page-inset:2.5rem}.hero{padding-top:2.5rem}.lab{padding-right:0}.rule-grid{gap:var(--space-5)}.lab-grid,.rule-grid{margin-top:var(--space-6)}.topbar{min-height:4rem}.contact h2,.section h2{text-wrap:balance}.hanging-punctuation{position:static}}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width:400px){.theme-toggle-label{display:none}}.book-intro h1{margin:0;font-size:var(--text-hero);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}.book-color-group{margin-top:var(--space-7)}.book-color-group h3{margin:0 0 var(--space-4);font:700 var(--text-title)/var(--leading-heading) var(--font-sans);letter-spacing:0}.book-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));grid-gap:var(--space-4);gap:var(--space-4)}.book-color-card,.book-pair-card{padding:var(--space-3);border:2px solid var(--ink);border-radius:.3rem .8rem .3rem .8rem;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}.book-color-swatch{height:4.5rem;margin-bottom:var(--space-3);border:1px solid var(--line);border-radius:.25rem .6rem .25rem .6rem}.book-color-name,.book-color-value{margin:0;font:700 var(--text-small)/var(--leading-compact) var(--font-mono)}.book-color-usage{margin:var(--space-1) 0;color:var(--ink-soft);font-size:var(--text-micro);line-height:var(--leading-compact)}.book-color-value{color:var(--ink-soft);font-weight:400;word-break:break-all}.book-color-contrast{margin:var(--space-1) 0 0;color:var(--ink-muted);font-size:var(--text-micro);font-family:var(--font-mono)}.book-pair-card{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-2);min-height:8rem}.book-pair-contrast,.book-pair-label{margin:0;font:700 var(--text-micro)/var(--leading-label) var(--font-mono);letter-spacing:var(--tracking-label)}.book-pair-sample{margin:0;font-size:var(--text-title);font-weight:700}.book-type-list{margin-top:var(--space-6)}.book-type-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--line)}.book-type-sample{flex:1 1 60%;min-width:0;margin:0;overflow-wrap:break-word;font-weight:700}.book-type-meta{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:.2rem;margin:0;color:var(--ink-soft);font:var(--text-micro)/var(--leading-label) var(--font-mono);white-space:nowrap}.book-type-table{margin-top:var(--space-6);border-collapse:collapse;font:var(--text-small)/var(--leading-compact) var(--font-mono)}.book-type-table td{padding:var(--space-2) var(--space-4) var(--space-2) 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}.book-space-list{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6)}.book-space-row{display:grid;grid-template-columns:minmax(3rem,18rem) auto;align-items:center;grid-gap:var(--space-3);gap:var(--space-3)}.book-space-bar{max-width:100%;height:var(--space-4);border:1px solid var(--ink);background:var(--acid)}.book-space-meta{display:flex;align-items:baseline;gap:var(--space-2);white-space:nowrap}.book-space-meta code{color:var(--ink);font-size:var(--text-small)}.book-space-meta span{color:var(--ink-muted);font:var(--text-micro)/1 var(--font-mono)}.book-component-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));grid-gap:var(--space-4);gap:var(--space-4);margin-top:var(--space-6)}.book-swatch{position:relative;padding:var(--space-6) var(--space-4) var(--space-4);border:1px solid var(--line);background:var(--paper)}.book-swatch--full{grid-column:1/-1;overflow:hidden}.book-swatch-label{position:absolute;top:.5rem;left:.6rem;color:var(--ink-muted);font:700 var(--text-micro)/1 var(--font-mono);letter-spacing:var(--tracking-label)}.book-swatch-body{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.book-note{margin:0;color:var(--ink-soft);font-size:var(--text-small);line-height:var(--leading-body)}.book .copy-status,.book .idle-note,.book .pop-bubble,.book .quote{position:static;opacity:1;animation:none;pointer-events:auto}.book .copy-status,.book .idle-note{transform:rotate(-3deg)}.book .copy-status{margin-top:var(--space-2)}.book .quote{transform:rotate(-2deg)}.book .pop-bubble{display:inline-grid}@media (max-width:760px){.book-color-grid,.book-component-grid{grid-template-columns:1fr}.book-type-row{flex-direction:column}.book-type-meta,.book-type-row{align-items:flex-start}}