:root { color-scheme: light; --ink:#17163e; --muted:#7e7487; --accent:#535bdd; --rule:#e2dce7; --paper:#f8f4f8; }
* { box-sizing:border-box; }
body { margin:0; padding:22px 24px 36px; color:var(--ink); background:var(--paper); font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
main { max-width:1060px; margin:auto; }
a { color:inherit; text-decoration:none; }
button,select,input { font:inherit; }
button,a,select,input[type=range],summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #b3a6f5; outline-offset:4px; }
.topbar { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; margin-bottom:20px; }
.topbar a:hover { color:var(--ink); }
.cat-switcher { display:flex; align-items:center; gap:4px; border:1px solid var(--rule); border-radius:999px; padding:3px; }
.cat-switcher a { padding:4px 11px; border-radius:999px; font-size:12px; }
.cat-switcher a[aria-current=page] { color:var(--ink); background:#eae3f0; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:25px; }
.eyebrow { font-size:10px; font-weight:650; letter-spacing:.17em; margin:0 0 7px; color:var(--muted); }
h1 { font-size:clamp(25px,3vw,34px); line-height:1.12; letter-spacing:-.045em; margin:0; font-weight:650; }
.description { color:var(--muted); margin:8px 0 0; font-size:14px; }
.download { border:1px solid #d9d0e0; border-radius:28px; padding:11px 19px; white-space:nowrap; font-size:13px; display:flex; align-items:center; gap:22px; }
.download:hover { background:#efe9f4; }
.download span { font-size:19px; }
.tabs { display:flex; gap:24px; border-bottom:1px solid var(--rule); margin-bottom:18px; }
.tabs button { padding:0 0 11px; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--muted); cursor:pointer; font-size:13px; }
.tabs button[aria-selected=true] { border-bottom-color:var(--ink); color:var(--ink); }
.stage { background:#fbe3f8; border-radius:19px; overflow:hidden; }
.stage svg { display:block; width:100%; height:auto; max-height:calc(100svh - 360px); min-height:230px; }
.stage.clear { background-color:white; background-image:linear-gradient(45deg,#eeeaf1 25%,transparent 25%),linear-gradient(-45deg,#eeeaf1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eeeaf1 75%),linear-gradient(-45deg,transparent 75%,#eeeaf1 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.transport { display:flex; align-items:center; gap:16px; padding-top:18px; }
button.primary { border:0; border-radius:26px; background:var(--accent); color:white; min-width:120px; padding:11px 18px; cursor:pointer; font-size:14px; }
button.primary:hover { background:#454dcd; }
select { border:1px solid #ddd4e3; background:#fff; color:var(--ink); border-radius:10px; padding:10px 9px; cursor:pointer; font-size:13px; }
input[type=range] { flex:1; accent-color:var(--accent); min-width:120px; cursor:pointer; }
output { font-variant-numeric:tabular-nums; color:var(--muted); font-size:12px; min-width:97px; text-align:right; }
.scrub-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.scene-footer { display:flex; justify-content:space-between; align-items:center; margin-top:15px; color:var(--muted); font-size:12px; gap:15px; }
.phase { display:flex; align-items:center; gap:7px; }
.phase i { width:5px; height:5px; background:#9a8db1; border-radius:50%; }
.check { display:flex; align-items:center; gap:6px; cursor:pointer; }
.check input { accent-color:var(--accent); }
.keyframes { margin-top:20px; padding-top:14px; border-top:1px solid var(--rule); color:var(--muted); font-size:12px; }
summary { cursor:pointer; width:fit-content; }
.frame-shortcuts { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.frame-shortcuts button { background:#f0eaf4; color:var(--ink); border:0; border-radius:7px; min-width:36px; padding:7px; font-size:12px; cursor:pointer; font-variant-numeric:tabular-nums; }
.frame-shortcuts button:hover { background:#e7ddf1; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:baseline; margin-bottom:18px; font-size:12px; color:var(--muted); }
.section-heading p { margin:0; }
.section-heading a { white-space:nowrap; color:var(--ink); }
.frame-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.frame-card { padding:0; text-align:left; border:1px solid var(--rule); border-radius:12px; background:#fffafc; overflow:hidden; cursor:pointer; color:var(--ink); }
.frame-card:hover { border-color:#9f94d3; }
.frame-card img { display:block; width:100%; height:auto; aspect-ratio:var(--frame-ratio); }
.frame-card span { display:block; padding:9px 11px 11px; font-size:11px; }
.frame-card b { display:inline-block; font-size:10px; font-weight:550; color:#9b8aab; margin-right:7px; }
.part-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.part-card { border:1px solid var(--rule); border-radius:12px; background:#fffafc; overflow:hidden; }
.part-card img { display:block; width:100%; height:135px; padding:20px; background:#fbe7f9; }
.part-card div { padding:10px 12px 12px; }
.part-card p { margin:0; font-size:11px; }
.part-card a { display:inline-block; color:var(--muted); font-size:10px; margin-top:4px; }
.part-card a:hover { color:var(--accent); }
.compare-intro { color:var(--muted); font-size:12px; margin:0 0 18px; }
.compare-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; font-size:12px; color:var(--muted); }
.compare-controls label { display:flex; align-items:center; flex-wrap:wrap; max-width:100%; gap:10px; }
.compare-controls select { max-width:100%; }
.compare-controls button { border:0; background:none; color:var(--ink); font-size:12px; cursor:pointer; padding:8px 0; }
.compare-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
.compare-grid figure { margin:0; min-width:0; }
.compare-grid figcaption { font-size:12px; color:var(--muted); margin-bottom:8px; }
.compare-grid img { display:block; width:100%; height:auto; border-radius:12px; }
.page-footer { display:flex; justify-content:space-between; color:#a699b0; font-size:10px; margin-top:24px; }
.noscript { padding:12px 0; color:var(--muted); }
[hidden] { display:none !important; }
@media(max-width:660px) {
  body { padding:18px 16px 28px; }
  .topbar { margin-bottom:23px; }
  header { gap:12px; align-items:flex-start; }
  .description { font-size:12px; max-width:210px; }
  .download { padding:9px 12px; font-size:11px; gap:10px; }
  .tabs { gap:20px; margin-bottom:14px; }
  .stage { border-radius:13px; }
  .stage svg { min-height:210px; max-height:none; }
  .transport { flex-wrap:wrap; gap:12px; padding-top:15px; }
  .transport input[type=range] { flex-basis:100%; order:4; margin:0; }
  .transport output { margin-left:auto; }
  button.primary { min-width:111px; }
  .frame-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .part-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .part-card img { height:145px; }
  .section-heading { display:block; }
  .section-heading a { display:inline-block; margin-top:9px; }
  .compare-grid { grid-template-columns:1fr; gap:18px; }
  .compare-controls { align-items:flex-start; flex-direction:column; gap:6px; }
}
@media(max-width:359px) {
  .tabs { gap:12px; }
  .tabs button { font-size:12px; white-space:nowrap; }
}