/* extracted from motion/index.html by ops/inline_style_extract.py — linked in the same document position to preserve cascade order */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);line-height:1.5}
.wrap{max-width:1080px;margin:0 auto;padding:var(--space-24) var(--space-16) var(--space-64)}
h1{font-family:var(--serif);font-size:clamp(var(--text-28),4vw,var(--text-40));margin:0 0 var(--space-4);color:var(--sand)}
h2{font-size:var(--text-13);letter-spacing:.16em;text-transform:uppercase;color:var(--move);
margin:var(--space-40) 0 var(--space-12);padding-bottom:var(--space-8);border-bottom:1px solid var(--line)}
.lede{color:var(--muted);max-width:70ch;margin:0 0 var(--space-8)}
.lede b{color:var(--ink);font-weight:400}
.law{border-left:2px solid var(--sand);padding:var(--space-8) 0 var(--space-8) var(--space-12);margin:var(--space-16) 0;color:var(--ink);max-width:74ch}
.law code{color:var(--sand)}
/* control bar */
.bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;
background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);padding:var(--space-12) 0;margin-bottom:var(--space-8);font-size:var(--text-12)}
.bar label{display:inline-flex;align-items:center;gap:var(--space-8);color:var(--muted);cursor:pointer}
.bar .hint{color:var(--faint)}
/* slow-mo scales ONLY the four duration tokens — it forks no rule */
body.slowmo{--gm-instant:480ms;--gm-quick:840ms;--gm-standard:1680ms;--gm-slow:2700ms}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-16)}
.spec{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-8);padding:var(--space-16)}
.spec .nm{color:var(--sand);font-size:var(--text-13)}
.spec .ct{color:var(--faint);font-size:var(--text-11);margin:var(--space-4) 0 var(--space-12);min-height:2.6em}
.spec .never{color:var(--util);font-size:var(--text-11);margin-top:var(--space-12)}
/* neutral specimen — carries NO motion of its own; primitives are added by class */
.obj{display:grid;place-items:center;min-height:74px;border:1px solid var(--edge);
background:var(--panel2);border-radius:var(--radius-8);color:var(--mist);font-size:var(--text-12);
cursor:pointer;user-select:none;text-align:center;padding:var(--space-8)}
.obj.tall{min-height:104px}
.row-obj{display:block;border:1px solid transparent;border-radius:var(--radius-8);padding:var(--space-8) var(--space-12);
color:var(--mist);font-size:var(--text-12);text-decoration:none;cursor:pointer}
.gm-hover-tint:hover{background:var(--panel2);color:var(--ink);border-color:var(--line)}
/* drift gallery: legacy values, quarantined here and nowhere else */
.drift{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:var(--space-12)}
.drift .obj{min-height:66px;font-size:var(--text-11)}
.lg{transition:transform 160ms ease,box-shadow 160ms ease}
.lg1:hover{transform:translateY(-1px)}
.lg2:hover{transform:translateY(-2px)}
.lg3:hover{transform:translate3d(0,-3px,80px) scale(1.012)}
.lg4:hover{transform:translate3d(0,-4px,92px) scale(1.012)}
.lg5{transition:transform 120ms cubic-bezier(0.23,1,0.32,1)}
.lg5:hover{transform:translateY(-4px) scale(1.015)}
.lg6{transition:transform .16s ease}
.lg6:hover{transform:scale(1.04)}
.stack{transition:transform .16s ease}
.stack:hover{transform:scale(1.015)}
.stack:hover .inner{transform:scale(1.09)}
.inner{display:block;margin-top:var(--space-8);padding:var(--space-4);border:1px dashed var(--edge2);
border-radius:var(--radius-2);color:var(--faint);font-size:var(--text-10);transition:transform .16s ease}
.verdict{color:var(--act);font-size:var(--text-11);margin-top:var(--space-8)}
.verdict.bad{color:var(--rose)}
/* misc specimen chrome */
.expander{border:1px solid var(--edge);border-radius:var(--radius-8);background:var(--panel2);overflow:hidden}
.expander>button{width:100%;background:none;border:0;color:var(--mist);font:inherit;font-size:var(--text-12);
padding:var(--space-12);text-align:left;cursor:pointer}
.expander p{margin:0;padding:0 var(--space-12) var(--space-12);color:var(--faint);font-size:var(--text-11)}
.track{height:5px;border-radius:var(--radius-16);background:var(--edge);overflow:hidden}
.track>span{display:block;height:100%;width:18%;background:var(--act)}
.stage{position:relative;height:104px;border:1px solid var(--edge);border-radius:var(--radius-8);
background:var(--panel2);overflow:hidden}
.stage .puck{position:absolute;left:12px;top:12px;width:56px;height:34px;border-radius:var(--radius-2);
border:1px solid var(--move);background:var(--panel);color:var(--move);
font-size:var(--text-10);display:grid;place-items:center;cursor:grab}
.cam{transform-origin:0 0}
.cam i{position:absolute;width:20px;height:20px;border:1px solid var(--tab);border-radius:var(--radius-2);font-style:normal}
button.act{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
font:inherit;font-size:var(--text-11);padding:var(--space-4) var(--space-12);border-radius:var(--radius-8);cursor:pointer;margin-top:var(--space-12)}
table{border-collapse:collapse;width:100%;font-size:var(--text-12);margin-top:var(--space-8)}
th,td{text-align:left;padding:var(--space-8) var(--space-8);border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--faint);font-weight:400;font-size:var(--text-11);letter-spacing:.08em;text-transform:uppercase}
td code{color:var(--sand)}
/* the container scrolls; the table keeps its columns rather than crushing to
three unreadable slivers at 390px */
.scroll{overflow-x:auto}
.scroll table{min-width:520px}
/* three-extremes matrix */
/* top-align every cell: the whole point is comparing three heights side by
side, and centring them in a 400px row puts the small ones where nothing
lines up with anything */
table.extremes td{text-align:center;vertical-align:top;padding-top:var(--space-12)}
table.extremes th{vertical-align:top;padding-top:var(--space-16);color:var(--muted);
text-transform:none;letter-spacing:0;font-size:var(--text-12);white-space:nowrap}
table.extremes th small{color:var(--faint);font-size:var(--text-10)}
table.extremes em{display:block;margin-top:var(--space-8);color:var(--faint);font-size:var(--text-10);font-style:normal}
.ex{border:1px solid var(--edge);background:var(--panel2);border-radius:var(--radius-8);
color:var(--mist);display:grid;place-items:center;cursor:pointer;
font-size:var(--text-11);margin:0 auto;text-align:center}
.ex-tiny{width:28px;height:28px;font:inherit;font-size:var(--text-12);padding:0}
.ex-card{width:190px;height:142px}
.ex-scene{width:260px;height:400px}
@media(max-width:760px){.ex-scene{height:240px;width:190px}}
/* Below ~640px the matrix cannot do its job as a table, and scrolling it
sideways does not save it: the row height is set by the scene specimen, so a
390px reader gets a ~300px row holding one 28px button and a lot of nothing,
with the two specimens the comparison depends on parked off-screen and the
row label scrolled away with them. Stack it — same specimens, same
magnitudes, one column, each labelled with the extreme it stands for, row
label kept in view. Values are untouched; this is layout only. */
@media(max-width:640px){
.scroll-extremes{overflow-x:visible}
.scroll-extremes table.extremes{min-width:0;width:100%}
table.extremes,table.extremes tbody,table.extremes tr,
table.extremes th,table.extremes td{display:block}
table.extremes tr:first-child{display:none}
table.extremes tr{border-bottom:1px solid var(--line);padding-bottom:var(--space-12);margin-bottom:var(--space-12)}
table.extremes tr:last-child{border-bottom:0;margin-bottom:0}
table.extremes th{border-bottom:0;padding:0 0 var(--space-8);white-space:normal}
table.extremes td{border-bottom:0;text-align:left;padding:0 0 var(--space-16)}
table.extremes td:last-child{padding-bottom:0}
table.extremes td::before{content:attr(data-col);display:block;margin-bottom:var(--space-8);
color:var(--faint);font-size:var(--text-10);letter-spacing:.08em;text-transform:uppercase}
table.extremes .ex{margin:0}
}
/* the sticky control bar must not sit on top of a specimen being judged */
h2, table.extremes{scroll-margin-top:var(--space-64)}