:root{color-scheme:light;font-family:Georgia,serif;color:#423c30;background:#eee5cd}
*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:auto;padding:24px}
.back{display:inline-flex;align-items:center;min-height:44px;color:#405d54}.eyebrow{font:700 .8rem system-ui;letter-spacing:.14em;text-transform:uppercase;color:#617267}
h1{font-size:clamp(2rem,5vw,3.8rem);font-weight:500;margin:.25em 0}header>p:last-child{font-size:1.12rem;line-height:1.5;max-width:740px}
.controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:25px 0 16px}
label{display:grid;gap:6px;font:600 .87rem system-ui;min-width:0}
select,button,input[type=color]{font:inherit;color:inherit;background:#fbf5e3;border:1px solid #a69e86;border-radius:9px;min-height:44px;max-width:100%}
select{padding:9px 30px 9px 12px}button{padding:10px 16px;cursor:pointer}button:hover{background:#fffaf0}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #836643;outline-offset:3px}
button[aria-pressed=true]{background:#d9e0c9;border-color:#657655}button:disabled{opacity:.7;cursor:default}
.colors{display:flex;flex-wrap:wrap;gap:12px}.color{flex:1 1 110px;max-width:175px}.color input{width:100%;height:44px;padding:4px}
.check{display:flex;align-items:center;min-height:44px;padding:6px 2px;gap:10px}.check input{width:22px;height:22px}
#status{font:.91rem system-ui;min-height:1.3em;margin:20px 0}
.motions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.motion{background:#d5dbc8;border:1px solid #aeb6a1;border-radius:14px;overflow:hidden;text-align:center;min-width:0}
.stage{height:220px;display:grid;place-items:center;background:linear-gradient(#dbe0d0,#c8d1bb);overflow:hidden}
.stage canvas{width:100%;height:100%;display:block}
h2{font-size:1.2rem;font-weight:500;margin:13px 0 6px}.motion p{font:.83rem system-ui;margin:0 0 14px}
.phases{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.phases button{flex:1 1 90px}
.note{line-height:1.55;font-size:.98rem;max-width:820px;color:#68614f}
details{border-top:1px solid #bbb29b;margin-top:22px;padding:8px 0}summary{min-height:44px;cursor:pointer;padding:12px 0;font-size:1.1rem}details p{line-height:1.5}
.poses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pose{display:grid;place-items:center;background:#d5dbc8;padding:8px;gap:8px;min-width:0}.pose canvas{width:96px;height:64px;max-width:100%}.pose span{font:.77rem system-ui;overflow-wrap:anywhere}
.proofs{display:flex;flex-wrap:wrap;gap:10px}.proofs a{display:flex;align-items:center;min-height:44px;padding:8px 12px;color:#405d54;background:#f8f1dd;border-radius:8px}
#error{padding:14px;border:1px solid #946152;background:#f5dfce}
@media(max-width:580px){main{padding:16px}.motions{grid-template-columns:1fr}.controls>label:not(.check){flex:1 1 130px}.controls>button{flex:1 1 120px}.color{flex:1 1 84px}.stage{height:204px}.poses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}