.variation-picker{color:#f7f0dd;background:#111d2c;border:1px solid #405266;border-radius:20px;padding:18px;width:min(920px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 22px 90px #0008}.variation-picker::backdrop{background:#070f1bda;backdrop-filter:blur(8px)}.variation-picker header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.variation-picker h2{margin:3px 0;font-size:23px}.variation-picker header small{font-size:9px;letter-spacing:2px;color:#a5f2ef}.variation-picker button,.variation-picker select,.variation-picker input{font:inherit}.variation-picker button{min-height:44px;border:1px solid #41566b;border-radius:9px;padding:8px 12px;background:#203246;color:inherit;cursor:pointer}.variation-picker [data-close]{width:44px;font-size:24px}.variation-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:360px}.variation-preview{position:relative;border-radius:13px;overflow:hidden;min-height:340px;background:#1d2936}.variation-preview canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}.variation-options{max-height:430px;overflow:auto;padding-right:3px}.variation-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.variation-list button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:75px;padding:5px;font-size:11px;overflow-wrap:anywhere}.variation-list svg{width:30px;height:30px;color:#a5f2ef}.variation-list [aria-pressed=true]{border-color:#dfff70;background:#304634;color:#e9ffbb}.variation-create{margin-top:12px;border-top:1px solid #354859}.variation-create summary{padding:14px 2px;cursor:pointer;min-height:44px;color:#dfff70}.variation-create label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;margin:6px 0}.variation-picker input,.variation-picker select{color:inherit;background:#203246;border:1px solid #41566b;border-radius:7px;min-height:44px;max-width:65%;padding:7px;min-width:0}.variation-picker input[type=range]{accent-color:#dfff70}.variation-create>button{width:100%;margin:4px 0}.variation-create>small{font-size:11px;color:#abbfc6}.variation-picker footer{display:flex;align-items:center;gap:12px;margin-top:14px}.variation-picker footer label{display:flex;align-items:center;gap:7px;flex:1;font-size:12px;min-width:0}.variation-picker footer select{flex:1}.variation-picker [data-notice]{font-size:11px;color:#b7c7d0;max-width:200px}.variation-picker .primary{background:#dfff70;color:#172029;border-color:#dfff70;font-weight:750}.preview-variations{min-height:44px!important;font-size:11px!important;pointer-events:auto}.variation-picker :focus-visible{outline:2px solid #dfff70;outline-offset:2px}@media(max-width:600px) and (orientation:portrait){.variation-picker{padding:12px}.variation-layout{display:flex;flex-direction:column;gap:10px;min-height:0}.variation-preview{min-height:210px;height:27dvh}.variation-options{max-height:28dvh}.variation-picker footer{flex-wrap:wrap;gap:5px}.variation-picker footer label{flex-basis:100%}.variation-picker [data-notice]{max-width:none;flex:1}.variation-picker footer .primary{flex:none;font-size:12px}}@media(max-height:460px) and (orientation:landscape){.variation-picker{padding:10px;overflow:hidden}.variation-picker header{margin-bottom:6px}.variation-picker h2{font-size:18px}.variation-layout{height:calc(100dvh - 156px);min-height:0}.variation-preview{min-height:0}.variation-options{max-height:100%}.variation-picker footer{margin-top:6px}.variation-picker [data-notice]{display:none}}
/* The editor occupies the same compact surface as ready-made variations. */
.variation-picker [hidden]{display:none!important}.variation-preview{isolation:isolate}.variation-live{position:absolute;z-index:1;top:12px;left:12px;border-radius:20px;padding:6px 9px;background:#101d2ccc;color:#c9f6e9;font-size:10px;pointer-events:none}.variation-tabs{display:flex;position:sticky;top:0;z-index:2;gap:6px;background:#111d2c;padding:0 0 10px}.variation-tabs button{flex:1;font-size:12px}.variation-tabs [aria-pressed=true]{background:#dfff70;color:#172029;border-color:#dfff70}.variation-create{margin:0;padding:0;border:0}.variation-create [data-base]{color:#a5f2ef;font-size:11px;margin:0 0 10px}.variation-create .variation-name{display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:12px}.variation-create .variation-name input{max-width:100%;width:100%;box-sizing:border-box}.variation-create .variation-range{display:block;margin:8px 0}.variation-range>span{display:flex;align-items:center;justify-content:space-between}.variation-range output{font-variant-numeric:tabular-nums;color:#dfff70;font-weight:700}.variation-picker .variation-range input{width:100%;max-width:100%;box-sizing:border-box;padding:0;background:transparent;border:0;cursor:ew-resize;touch-action:pan-y}.variation-range:has(input:disabled){opacity:.45}.variation-form{display:flex;gap:10px}.variation-form label{flex:1;flex-direction:column;align-items:stretch;gap:5px}.variation-form select{width:100%;max-width:100%}.variation-help{font-size:10px;line-height:1.5;color:#aebec7;margin:10px 0}.variation-tools{display:flex;gap:6px;margin:10px 0}.variation-tools button{flex:1;font-size:11px}.variation-picker footer{flex-wrap:wrap}.variation-picker footer>label{flex-basis:45%;flex-grow:1}.variation-picker footer [data-apply]{flex:1;font-size:12px}.variation-picker [data-notice]{flex-basis:100%;max-width:none;margin:0;order:3;min-height:16px}.variation-create button:active,.variation-tabs button:active{transform:translateY(1px)}
@media(min-height:461px){.variation-picker .variation-options{max-height:min(540px,calc(100dvh - 180px))}.variation-layout{min-height:0}.variation-preview{min-height:380px}}
@media(max-width:600px) and (orientation:portrait){.variation-picker{box-sizing:border-box}.variation-picker h2{font-size:19px;overflow-wrap:anywhere}.variation-picker .variation-preview{height:24dvh;min-height:150px;flex:none}.variation-picker .variation-options{max-height:calc(100dvh - 24dvh - 238px);min-height:100px}.variation-picker footer>label{flex-basis:100%}.variation-picker footer [data-apply]{flex-basis:100%;font-size:13px}.variation-picker [data-notice]{font-size:10px}.variation-tabs{padding-bottom:7px}.variation-picker header{margin-bottom:8px}}
@media(max-height:460px) and (orientation:landscape){.variation-picker{box-sizing:border-box}.variation-layout{height:calc(100dvh - 142px);grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.variation-picker .variation-preview{min-height:0}.variation-picker .variation-options{max-height:100%}.variation-picker footer{flex-wrap:nowrap}.variation-picker footer>label{flex-basis:45%}.variation-picker footer [data-apply]{flex:1;font-size:11px}.variation-tabs button{font-size:11px;padding:6px}.variation-range{margin:4px 0!important}}
.variation-pose-modes,.pose-parts{display:flex;gap:5px;margin:0 0 10px}.variation-pose-modes button{flex:1;font-size:11px;padding:6px}.variation-pose-modes [aria-pressed=true],.pose-parts [aria-pressed=true]{color:#172029;background:#a5f2ef;border-color:#a5f2ef}.variation-pose-controls{border:1px solid #526c7a;border-radius:12px;padding:10px;margin:0 0 12px;background:#182b3b}.pose-parts button{flex:1;font-size:11px;padding:6px}.variation-pose-controls [data-pose-hint]{font-size:10px;line-height:1.4;color:#b6d1d8;margin:5px 0}.variation-pose-controls .variation-tools{margin:5px 0 0}.pose-handles{position:absolute;inset:0;z-index:4;pointer-events:none}.pose-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.pose-lines polyline{stroke:#fff;stroke-width:2;stroke-dasharray:5 4;fill:none;vector-effect:non-scaling-stroke;opacity:.8}:is(.variation-picker,.variation-studio) .pose-joint{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;min-height:44px;min-width:44px;padding:0;border:0;border-radius:50%;background:transparent;pointer-events:auto;touch-action:none;cursor:move;box-shadow:none}.pose-joint i{display:block;width:13px;height:13px;margin:auto;border:2px solid #fff;border-radius:50%;background:#a5f2ef;box-shadow:0 0 0 4px #14233280,0 2px 8px #0008}.pose-joint[data-side=right] i{background:#dfff70}.pose-joint[data-side=center] i{background:#efbaa8}.pose-joint span{position:absolute;left:50%;top:37px;transform:translateX(-50%);border-radius:5px;padding:4px 5px;background:#142332e8;font-size:10px;white-space:nowrap;opacity:0;pointer-events:none}.pose-joint:hover span,.pose-joint:focus-visible span{opacity:1}.pose-joint:active i{transform:scale(1.25)}
@media(max-width:600px) and (orientation:portrait){.variation-preview:has(.pose-handles:not([hidden])){min-height:220px;height:30dvh}.variation-layout:has(.pose-handles:not([hidden])) .variation-options{max-height:calc(100dvh - 30dvh - 238px)}}
.variation-preview:has(.pose-handles:not([hidden])) .view-toolbar{top:8px;bottom:auto}
.variation-preview:has(.pose-handles:not([hidden])) .view-toolbar{left:8px;right:auto}.variation-preview:has(.pose-handles:not([hidden])) .variation-live{display:none}
@media(max-width:600px) and (orientation:portrait){.variation-layout:has(.pose-handles:not([hidden])) .variation-options{max-height:calc(100dvh - max(220px,30dvh) - 238px)}}

/* Keyframes stay inside the existing scrollable editor; save stays outside. */
.pose-timeline{border-top:1px solid #3b5364;padding-top:8px;margin:0 0 8px;min-width:0}.pose-timeline-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px}.pose-timeline-head output{color:#a5f2ef;font-size:10px;font-variant-numeric:tabular-nums}.pose-key-list{display:flex;gap:5px;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:5px 0;min-height:44px;align-items:center}.pose-key-list button{flex:none;min-width:44px;padding:6px 10px;font-size:11px;font-variant-numeric:tabular-nums}.pose-key-list button[aria-pressed=true]{background:#a5f2ef;color:#172029;border-color:#a5f2ef}.pose-key-list>span{font-size:10px;color:#b6d1d8;line-height:1.4}.pose-key-actions{display:flex;gap:5px}.pose-key-actions button{flex:1;min-width:0;font-size:11px;padding:7px}.pose-key-actions [data-add-key]{color:#dfff70;border-color:#839852}.pose-key-actions button:disabled{opacity:.4;cursor:default}.pose-timeline button:focus-visible{outline:2px solid #dfff70;outline-offset:-2px}

@media(max-width:600px) and (orientation:portrait){.variation-pose-modes,.pose-parts{margin-bottom:4px}}

/* One named handle avoids overlapping grab targets. */
.pose-target-row{display:flex;align-items:end;gap:6px;margin-bottom:6px}.pose-target-row label{flex:1;display:block!important;margin:0!important;font-size:10px}.pose-target-row select{display:block;width:100%;max-width:100%;margin-top:4px}.pose-target-row [data-fine]{font-size:11px;padding:6px 9px}.pose-target-row [aria-pressed=true],.pose-fixed-views [aria-pressed=true]{color:#172029;background:#a5f2ef;border-color:#a5f2ef}.pose-fixed-views{display:flex;gap:5px;margin-bottom:6px}.pose-fixed-views button{flex:1;font-size:11px;padding:6px}.pose-nudges{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:4px;margin-bottom:8px}.pose-nudges button{min-width:44px;padding:6px;font-size:18px}.pose-nudges [data-nudge=near],.pose-nudges [data-nudge=far]{grid-column:span 2;font-size:11px}.pose-joint[data-active=true] span{opacity:1}.pose-joint[data-active=true] i{box-shadow:0 0 0 5px #142332b0,0 2px 8px #0008}.variation-pose-controls .variation-tools button{min-width:0;font-size:10px;padding:5px}

.variation-options:has(.variation-pose-controls:not([hidden])) .variation-tabs{display:none}.variation-options:has(.variation-pose-controls:not([hidden])) .variation-pose-modes{position:sticky;top:0;z-index:2;background:#111d2c;padding-bottom:5px}

.pose-target-row label{min-width:0}
@media(min-width:660px) and (max-height:460px) and (orientation:landscape){.variation-pose-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;align-items:start}.variation-pose-controls>.variation-range,.variation-pose-controls>.pose-target-row{margin:0!important}.pose-fixed-views,.pose-nudges,.pose-timeline,.variation-pose-controls>[data-pose-hint],.variation-pose-controls>.variation-tools{grid-column:1/-1}.pose-nudges{grid-template-columns:repeat(6,minmax(44px,1fr));margin-bottom:4px}.pose-nudges [data-nudge=near],.pose-nudges [data-nudge=far]{grid-column:auto}.variation-pose-modes{margin-bottom:4px}}

.pose-flex{grid-column:1/-1}.pose-flex-buttons{display:flex;gap:5px}.pose-flex-buttons button{flex:1;font-size:11px;min-height:44px}.pose-flex>p{font-size:10px;line-height:1.4;color:#b6d1d8;margin:6px 0}.pose-joint[data-hinge=true]{cursor:ns-resize}

.pose-palm{grid-column:1/-1;min-width:0}.pose-palm .variation-range{margin:3px 0}.pose-palm [data-reset-palm]{width:100%;font-size:11px}.pose-palm p{font-size:10px;line-height:1.4;color:#b6d1d8;margin:5px 0}.pose-palm summary{padding:6px 0;font-size:11px;color:#b6d1d8;cursor:pointer}.pose-lines .palm-link{stroke:#a5f2ef;stroke-dasharray:none}
.pose-arm-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 6px}
.pose-arm-parts button{min-height:44px;min-width:0;padding:4px 2px;font-size:11px;white-space:nowrap}
.pose-arm-parts button[aria-pressed=true]{color:#172029;background:#a5f2ef;border-color:#a5f2ef}
.pose-arm-parts i{display:inline-grid;place-items:center;font-style:normal;width:15px;height:15px;border-radius:50%;background:#0003;font-size:10px}
.pose-shoulder{grid-column:1/-1;margin-bottom:6px}.pose-shoulder p,.pose-shoulder summary{font-size:11px;color:#b6d1d8;line-height:1.4}.pose-shoulder p{margin:5px 0}.pose-shoulder summary{padding:6px 0;cursor:pointer}
.pose-lines .upper-arm,.pose-lines .forearm{stroke-dasharray:none;stroke-width:3;stroke:#a5f2ef;filter:drop-shadow(0 0 1px #132539);opacity:1}
.pose-lines .forearm{stroke:#fff;stroke-dasharray:5 3}
.pose-joint i:not(:empty){display:grid;place-items:center;border:2px solid #fff;border-radius:50%;width:19px;height:19px;box-sizing:border-box;font:700 10px/1 system-ui;color:#142332;background:#a5f2ef}

.pose-joint[data-edge=left] span{left:50%;transform:translateX(-10px)}.pose-joint[data-edge=right] span{left:auto;right:50%;transform:translateX(10px)}
.pose-arm-parts[hidden],.pose-shoulder[hidden]{display:none}


.pose-scope-notice{display:flex;align-items:center;gap:8px;grid-column:1/-1;padding:8px;margin:4px 0 8px;border:1px solid #b5a861;border-radius:9px;background:#3b3b2455}.pose-scope-notice span{flex:1;min-width:0;font-size:11px;line-height:1.4;color:#f2e9ba}.pose-scope-notice button{flex:none;min-height:44px;font-size:11px;background:#dfff70;color:#172029;border-color:#dfff70}

:is(.variation-picker,.variation-studio) .pose-joint[data-active=true]{z-index:2}
.pose-joint[data-active=false] i:not(:empty){background:#243c4b;color:#e0fffc}
.pose-joint[data-rotating=true] i:not(:empty){background:#dfff70;cursor:grab}
.pose-palm-modes{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pose-palm-modes button[aria-pressed=true],:is(.variation-picker,.variation-studio) .pose-palm-turn[aria-pressed=true]{background:#dfff70;color:#172029;border-color:#dfff70}
:is(.variation-picker,.variation-studio) .pose-palm-turn{position:absolute;z-index:3;transform:translate(23px,-50%);display:grid;place-items:center;width:30px;height:30px;min-height:30px;padding:0;border-radius:50%;background:#182b3b;color:#a5f2ef;pointer-events:auto;touch-action:manipulation;font-size:18px}
:is(.variation-picker,.variation-studio) .pose-palm-turn[data-side=left]{transform:translate(calc(-100% - 23px),-50%)}
:is(.variation-picker,.variation-studio) .pose-palm-turn[hidden]{display:none}
@media(max-width:430px){.pose-arm-parts button i{display:none}.pose-arm-parts button{font-size:10px}}

.pose-lines .pose-wrist-leader{stroke:#a5f2ef;stroke-width:1.5;stroke-dasharray:none}

.pose-body summary,.variation-route summary{color:#b6d1d8;font-size:11px;cursor:pointer;padding:6px 0}
.pose-body[hidden],.variation-picker [hidden]{display:none}
.pose-height{margin-top:8px}
.variation-picker>header>div{min-width:0;flex:1}
.variation-picker>header .variation-name{display:grid;gap:4px;font-size:11px;color:#b6d1d8}
.variation-picker>header .variation-name[hidden]{display:none}
.variation-picker>header [data-name]{width:min(100%,420px);min-width:0;font-size:17px;font-weight:750}
.variation-picker>header [data-base]{font-size:11px;color:#b6d1d8;margin:4px 0 0}
.variation-route{padding:7px 0}
.variation-route label{display:grid;grid-template-columns:1fr minmax(110px,1fr);align-items:center;gap:6px;margin:6px 0}
.variation-route select{width:100%;min-width:0}

.pose-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 6px}
.pose-groups button{min-height:36px;padding:5px;font-size:11px}
.pose-groups button[aria-pressed=true]{background:#a5f2ef;color:#172029;border-color:#a5f2ef}