:root{--accent: #43fe9a;--bg: #E5E9EE;--ink: #0F172A;--muted: #5B6473;--card: #FFFFFF;--max: 1180px;--line: #000;--label: #6b7280;--text-2: #4b5563;--header-bg: rgba(235, 239, 242, .92);--header-line: #C9CED5;--footer-bg: #DFE3EA;--row-line: #EDF0F2;--field-line: #d1d5db;--font: "Instrument Sans", "Noto Sans JP", system-ui, -apple-system, sans-serif;--mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--ease-drawer: cubic-bezier(.32, .72, 0, 1);--stage-dark: #0F172A;--stage-light: #F4F6F8;--header-h: 64px;--sidebar-w: 240px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}code,pre{font-family:var(--mono)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.header{position:sticky;top:0;z-index:20;height:var(--header-h);background:var(--header-bg);border-bottom:1px solid var(--header-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.5rem}.brand{font-weight:700;font-size:1.15rem;white-space:nowrap}.search input{width:min(320px,42vw);height:36px;padding:0 .9rem;border:1px solid var(--field-line);border-radius:.7rem;background:#fff;font-size:.8rem}.search input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.body{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}.sidebar{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;padding:1.1rem 0 2rem;background:#fff;border-right:1px solid var(--line)}.side-group{margin-top:1.2rem}.side-label{margin:0 1.25rem .35rem;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--label)}.side-row{position:relative;display:block;padding:.3rem 1.25rem;font-size:.8rem;line-height:1.5;color:var(--text-2)}.side-row.is-top{font-weight:700;color:var(--ink)}.side-row.is-active{color:var(--ink);font-weight:700}.side-row.is-active:before{content:"";position:absolute;left:0;top:50%;width:3px;height:1.1rem;translate:0 -50%;background:var(--accent)}@media(hover:hover)and (pointer:fine){.side-row{transition:color .15s ease}.side-row:hover{color:var(--ink)}}.main{min-width:0;padding-bottom:4rem}.page-head{padding:2.2rem 1.5rem 1.7rem;background:#fff;border-bottom:1px solid var(--line)}.page-head h1{margin:0;font-size:clamp(2rem,3.4vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}.page-head p{margin:.8rem 0 0;font-size:.82rem;color:var(--muted)}.page-head a{text-decoration:underline;text-underline-offset:3px}.section-title-row{display:flex;align-items:center;gap:.65rem;padding:1rem 1.5rem .7rem;background:#fff;border-bottom:1px solid var(--line)}.section-pill{width:28px;height:3px;border-radius:999px;background:var(--accent)}.section-title{margin:0;font-size:1.3rem;font-weight:700}.empty{margin:0;padding:2rem 1.5rem;background:#fff;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--muted)}.grid-clip{overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:0 -1px -1px 0}.card{display:flex;flex-direction:column;min-width:0;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.card-stage{aspect-ratio:16 / 9;border-bottom:1px solid var(--line)}.card-body{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem 1.2rem;flex:1 1 auto}.card-label{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--label)}.card-flag{padding:0 .4rem;border:1px solid var(--field-line);border-radius:999px;letter-spacing:.04em;text-transform:none}.card-title{margin:0;font-size:1.02rem;font-weight:700;line-height:1.4}.card-meta{margin:0;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}.card-text{margin:0;font-size:.8rem;color:var(--text-2);line-height:1.6;flex:1 1 auto}@media(hover:hover)and (pointer:fine){.card-body{transition:background-color .15s ease}.card:hover .card-body{background:#f7f8fa}}.card-body:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.verdict{align-self:flex-start;margin-top:.35rem;padding:.1rem .55rem;border:1px solid var(--line);border-radius:999px;font-size:.66rem;font-weight:600;line-height:1.6}.verdict.is-ok{background:var(--accent)}.verdict.is-conditional{background:#fff}.verdict.is-decorative{background:var(--bg);border-color:var(--header-line);color:var(--text-2)}.verdict.is-avoid{background:var(--ink);color:#fff}.stage{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;isolation:isolate}.stage.is-dark{background:var(--stage-dark);color:#f4f6f8}.stage.is-light{background:var(--stage-light);color:var(--ink)}.stage-demo{width:100%;height:100%;display:grid;place-items:center}.stage.is-fill .stage-demo{position:absolute;top:0;right:0;bottom:0;left:0;display:block}.stage.is-fill .stage-demo>*{width:100%;height:100%}.stage-idle{font-size:.72rem;letter-spacing:.06em;opacity:.4}.stage-message{font-size:.72rem;opacity:.6}.stage-page{position:fixed;top:0;right:0;bottom:0;left:0}.button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 1rem;border:1px solid var(--ink);border-radius:.8rem;background:var(--ink);color:#fff;font-size:.75rem;font-weight:700;cursor:pointer;transition:transform .16s var(--ease-out)}.button:active{transform:scale(.97)}.button.is-ghost{background:#fff;color:var(--ink)}.icon-button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:.6rem;background:#fff;cursor:pointer;font-size:.95rem;transition:transform .16s var(--ease-out)}.icon-button:active{transform:scale(.97)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:2rem 1.5rem;background:#0f172a73;transition:opacity .25s var(--ease-out)}@starting-style{.modal-backdrop{opacity:0}}.modal{width:min(1180px,100%);max-height:100%;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:.6rem;transform-origin:center;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}@starting-style{.modal{opacity:0;transform:scale(.96)}}@media(prefers-reduced-motion:reduce){.modal{transition:opacity .2s ease}@starting-style{.modal{transform:none}}}.modal-head{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem .9rem;background:#fff;border-bottom:1px solid var(--line)}.modal-head h2{margin:.15rem 0 0;font-size:1.3rem;line-height:1.3}.modal-actions{display:flex;gap:.4rem}.modal-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr)}.detail-stage-col{border-right:1px solid var(--line);min-width:0}.detail-stage{aspect-ratio:16 / 10;border-bottom:1px solid var(--line)}.player-bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.7rem 1.25rem;border-bottom:1px solid var(--line)}.player-note{font-size:.7rem;color:var(--muted)}.controls{display:grid;gap:.7rem;padding:1rem 1.25rem 1.2rem}.control{display:grid;grid-template-columns:8rem minmax(0,1fr);align-items:center;gap:.8rem}.control label{font-size:.72rem;font-weight:600}.control input[type=text],.control input[type=number]{height:32px;padding:0 .6rem;border:1px solid var(--field-line);border-radius:.4rem;font-size:.8rem}.control input[type=color]{width:48px;height:32px;padding:2px;border:1px solid var(--field-line);border-radius:.4rem;background:#fff}.control-range{display:flex;align-items:center;gap:.6rem}.control-range input{flex:1 1 auto;accent-color:var(--ink)}.control-range output{min-width:3.5rem;font-size:.72rem;font-variant-numeric:tabular-nums;text-align:right}.info{padding:1.1rem 1.25rem 1.4rem;min-width:0}.info-summary{margin:0 0 1rem;font-size:.85rem;line-height:1.7}.info-list{margin:0;border-top:1px solid var(--row-line)}.info-list>div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.8rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--row-line)}.info-list dt{font-size:.72rem;color:var(--label)}.info-list dd{margin:0;font-size:.8rem;overflow-wrap:anywhere}.info-list dd .verdict{margin-top:0}.info-list code{font-size:.74rem}.info-notes,.info-section ul{margin:.8rem 0 0;padding-left:1.1rem;font-size:.78rem;color:var(--text-2)}.info-section h3{margin:1.2rem 0 0;font-size:.82rem}.findings li.is-hard{color:#b42318}.info-source{margin:1.4rem 0 0;font-size:.66rem;color:var(--label);overflow-wrap:anywhere}.code-block{grid-column:1 / -1;border-top:1px solid var(--line)}.code-tabs{display:flex;align-items:center;gap:.3rem;padding:.6rem 1.25rem;border-bottom:1px solid var(--line)}.code-tabs [role=tab]{padding:.2rem .7rem;border:1px solid transparent;border-radius:999px;background:none;cursor:pointer;font-size:.75rem;font-weight:600;color:var(--muted)}.code-tabs [role=tab][aria-selected=true]{border-color:var(--line);color:var(--ink)}.code-tabs .button{margin-left:auto}.code-block pre{margin:0;max-height:420px;overflow:auto;padding:1rem 1.25rem 1.4rem;background:var(--stage-light);font-size:.74rem;line-height:1.6}:root{--demo-font: var(--font)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;padding:.8rem 1.5rem;background:#fff;border-bottom:1px solid var(--line)}.tool{display:flex;align-items:center;gap:.5rem}.tool-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--label);white-space:nowrap}.tool select{height:30px;padding:0 .5rem;border:1px solid var(--field-line);border-radius:.5rem;background:#fff;font-size:.75rem}.chips,.segmented{display:flex;flex-wrap:wrap;gap:.25rem}.chips button,.segmented button,.toggle{height:28px;padding:0 .7rem;border:1px solid var(--field-line);border-radius:999px;background:#fff;color:var(--text-2);font-size:.72rem;font-weight:600;cursor:pointer;transition:transform .16s var(--ease-out)}.chips button:active,.segmented button:active,.toggle:active{transform:scale(.97)}.chips button[aria-pressed=true],.segmented button[aria-pressed=true],.segmented [aria-selected=true]{border-color:var(--ink);background:var(--ink);color:#fff}.toggle[aria-pressed=true]{border-color:var(--ink);background:var(--accent);color:var(--ink)}.card,.card-stage{position:relative}.stage-play{position:absolute;right:.6rem;bottom:.6rem;z-index:2;width:32px;height:32px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:.7rem;cursor:pointer;transition:transform .16s var(--ease-out)}.stage-play:active{transform:scale(.97)}.favorite{position:absolute;right:.7rem;bottom:.9rem;width:30px;height:30px;border:0;background:none;cursor:pointer;font-size:1.05rem;line-height:1;color:var(--label);transition:transform .16s var(--ease-out)}.favorite[aria-pressed=true]{color:var(--ink)}.favorite:active{transform:scale(.9)}.stage-poster{width:100%;height:100%;object-fit:cover;display:block}.timeline-stage{font-family:var(--demo-font)}.timeline-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.timeline-layer.is-ghost{pointer-events:none;filter:saturate(.4)}.timeline-stage .is-try-target{cursor:pointer}.timeline-stage:not(.is-trying) .timeline-layer{pointer-events:none}.detail-stage.is-compare{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:auto}.detail-stage.is-compare figure{margin:0;display:grid;grid-template-rows:auto auto}.detail-stage.is-compare figure+figure{border-left:1px solid var(--line)}.detail-stage.is-compare .stage{aspect-ratio:4 / 3;height:auto}.detail-stage.is-compare figcaption{padding:.5rem .8rem;border-top:1px solid var(--line);font-size:.72rem;color:var(--text-2)}.scrubber{flex:1 1 140px;min-width:120px;accent-color:var(--ink)}.time{min-width:7.5rem;font-size:.72rem;font-variant-numeric:tabular-nums;text-align:right;color:var(--muted)}.view-bar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.7rem 1.25rem;border-bottom:1px solid var(--line)}.easing-value{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.mini-button{height:22px;padding:0 .5rem;border:1px solid var(--field-line);border-radius:999px;background:#fff;font-size:.62rem;font-weight:600;cursor:pointer}.keywords{display:flex;flex-wrap:wrap;gap:.3rem;margin:.9rem 0 0;padding:0;list-style:none}.keywords li{padding:.1rem .55rem;border:1px solid var(--line);border-radius:.4rem;font-family:var(--mono);font-size:.68rem}.info-text{margin:.5rem 0 0;font-size:.78rem;color:var(--text-2)}.easing-graph{margin:1.1rem 0 0}.easing-graph svg{width:100%;max-width:280px;height:auto;display:block}.easing-graph figcaption{margin-top:.3rem;font-size:.66rem;color:var(--label)}.easing-box{fill:none;stroke:var(--row-line)}.easing-linear{stroke:var(--header-line);stroke-dasharray:3 3}.easing-curve{fill:none;stroke:var(--ink);stroke-width:2}.easing-playhead{stroke:var(--accent);stroke-width:2}.easing-dot{fill:var(--accent);stroke:var(--ink);stroke-width:1.5}@media(max-width:880px){.body{grid-template-columns:1fr}.sidebar{position:static;height:auto;display:flex;gap:.2rem;overflow-x:auto;padding:.5rem 1rem;border-right:0;border-bottom:1px solid var(--line)}.side-group{display:contents}.side-label{display:none}.side-row{flex:none;padding:.3rem .7rem;white-space:nowrap}.side-row.is-active:before{left:.7rem;right:.7rem;top:auto;bottom:0;width:auto;height:3px;translate:none}.search input{width:44vw}.modal-backdrop{padding:0}.modal{border-radius:0;height:100%}.modal-body{grid-template-columns:1fr}.detail-stage-col{border-right:0;border-bottom:1px solid var(--line)}.control{grid-template-columns:1fr;gap:.3rem}}