:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#edf3ed;background:#111c20}
*{box-sizing:border-box}
body{margin:0;padding:env(safe-area-inset-top) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
header,main{max-width:960px;margin:auto}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:24px 0}
h1{font-size:clamp(20px,4vw,30px);margin:0}
a{color:#b9dfce;text-underline-offset:4px}
header a{flex-shrink:0;padding:10px 0}
section{background:#1a2b30;border:1px solid #37504f;border-radius:20px;padding:clamp(16px,4vw,32px)}
.badge{display:inline-block;color:#e7d39c;background:#35413a;border-radius:20px;padding:6px 12px;font-size:13px}
h2{font-size:24px;margin:16px 0 8px}
p{line-height:1.6;margin:8px 0;color:#c5d4d1}
figure{margin:20px 0;background:radial-gradient(ellipse,#42534b,#152428);border-radius:16px;overflow:hidden;text-align:center}
img{display:block;width:100%;height:auto;max-width:680px;margin:auto}
figcaption{padding:0 16px 20px;color:#c5d4d1;font-size:14px}
.notice{border-top:1px solid #37504f;padding-top:16px;font-size:14px}
a:focus-visible{outline:2px solid #e7d39c;outline-offset:4px}
.pose-viewer{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border:0;padding:0;margin:8px 0 12px;min-width:0}
.pose-label{font-size:14px;color:#c5d4d1;margin:8px 0}
.pose-choice{position:absolute;width:1px;height:1px;opacity:0}
.pose-choice+label{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:10px 8px;background:#263d43;border:1px solid #48625e;border-radius:12px;cursor:pointer;font-size:16px;line-height:1.3;overflow-wrap:anywhere;touch-action:manipulation}
.pose-choice:checked+label{background:#d8c28b;color:#18262a;border-color:#d8c28b;font-weight:700}
.pose-choice:focus-visible+label{outline:3px solid #fff;outline-offset:2px}
.pose{display:none;grid-column:1/-1;margin:4px 0 0}
#pose-idle:checked~.idle,#pose-contact:checked~.contact,#pose-down:checked~.down,#pose-passing:checked~.passing,#pose-up:checked~.up{display:block}
.pose img{height:auto;aspect-ratio:1;object-fit:contain;width:100%;max-width:520px}
.pose figcaption{padding:8px 12px 12px;line-height:1.4}
#pose-up+label{grid-column:1/-1}
summary{cursor:pointer;min-height:44px;padding:12px 0;color:#e7d39c}
details p{font-size:14px}
@media(max-width:600px){
 .pose-viewer{grid-template-columns:repeat(2,minmax(0,1fr))}
 body{padding-right:max(10px,env(safe-area-inset-right));padding-left:max(10px,env(safe-area-inset-left))}
 header{gap:8px;padding:8px 2px}
 h1{font-size:18px;line-height:1.3}
 header a{min-height:44px;display:flex;align-items:center}
 section{padding:12px;border-radius:16px}
 h2{font-size:20px;margin:12px 0}
 .badge{font-size:12px;line-height:1.4;max-width:100%}
 .notice{font-size:14px;line-height:1.5;margin-bottom:0}
}
@media(orientation:landscape) and (max-height:500px){.pose img{max-width:340px}}
#sequence-controls{border-top:1px solid #37504f;padding-top:12px}
#sequence-controls[hidden]{display:none}
#sequence-controls p{font-size:14px}
.sequence-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sequence-buttons button,.sequence-speed select{min-height:48px;font:inherit;color:#edf3ed;background:#263d43;border:1px solid #48625e;border-radius:12px;padding:10px;min-width:0}
.sequence-buttons button{cursor:pointer}
.sequence-buttons button:disabled{opacity:.45;cursor:default}
.sequence-speed{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:14px}
button:focus-visible,select:focus-visible{outline:3px solid #e7d39c;outline-offset:2px}
.pose-stage{position:relative;width:100%;max-width:520px;margin:auto}
.pose-stage img{width:100%;max-width:none}
.small-review .pose-stage{width:140px;max-width:100%;margin:16px auto}
.show-guides .pose-stage::before,.show-guides .pose-stage::after{content:"";position:absolute;pointer-events:none;z-index:1}
.show-guides .pose-stage::before{left:0;right:0;top:94%;border-top:1px dashed #f4d176}
.show-guides .pose-stage::after{top:0;bottom:0;left:50%;border-left:1px dashed #7ee6df}
#review-options{margin:8px 0}
#review-options[hidden]{display:none}
#review-options label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;cursor:pointer}
#review-options input{width:22px;height:22px;accent-color:#d8c28b;flex-shrink:0}
#review-options p{font-size:12px;line-height:1.4}
@media(orientation:landscape) and (max-height:500px){.pose-stage{max-width:340px}}
.anchor-mark{display:none;position:absolute;transform:translate(-50%,-50%);z-index:2;pointer-events:none;width:20px;height:20px;border-radius:50%;background:#152428;color:#fff;border:2px solid #ffcf66;font:bold 11px/16px system-ui;text-align:center}
.anchor-pelvis{border-color:#7ee6df}
.anchor-note{display:none;text-align:left;padding:8px 12px;font-size:14px;line-height:1.45;color:#f1d69c}
.show-anchors .anchor-mark,.show-anchors .anchor-note{display:block}