:root{--ink:#000000;--muted:#83909a;--line:#e6eaed;--blue:#000000;--red:#d36c54;--green:#578975;--paper:#fff;--ui:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;font:14px var(--ui);color:var(--ink);background:#fff;overflow:hidden}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{touch-action:manipulation;background:#fff;border:1px solid transparent;border-radius:8px;padding:8px 10px;display:inline-flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap}button:hover{background:#f3f6f9}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #76a0e6;outline-offset:2px}button:disabled{opacity:.4;cursor:default}button.active{color:var(--blue);background:#edf3fd}button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button.icon{padding:8px}.divider{width:1px;height:27px;background:var(--line);flex-shrink:0}select{border:0;background:#f5f7f9;border-radius:6px;padding:7px 8px}input{min-width:0;background:#fff;border:1px solid #dfe5e9;border-radius:6px;padding:7px 8px;width:100%}input[type=checkbox]{width:auto;accent-color:var(--blue)}input[type=range]{padding:0;border:0;accent-color:var(--blue)}input[readonly]{background:#f5f7f9}small,.muted{color:var(--muted)}
header{height:76px;position:relative;display:flex;align-items:center;padding:0 23px;border-bottom:1px solid var(--line);gap:21px;z-index:4;background:#fff}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.brand svg{height:29px;width:29px}.brand b{font-size:17px;font-weight:650;letter-spacing:1px}.palette{display:flex;align-items:center;gap:3px;flex:1;justify-content:center}.palette button{flex-direction:column;gap:3px;padding:5px 11px;font-size:12px}.palette button svg{width:31px;height:27px}.header-actions{display:flex;gap:3px}.menuwrap{position:relative}.popup-menu{display:none;position:absolute;right:0;top:45px;min-width:185px;padding:5px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px #00000015;z-index:20}.popup-menu.open{display:grid}.popup-menu button{justify-content:flex-start}
.palette-group{position:relative;align-self:stretch;display:flex;align-items:center}.palette-submenu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:134px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px #00000015;z-index:24}.palette-group:hover>.palette-submenu,.palette-group:focus-within>.palette-submenu{display:grid}.palette .palette-submenu button{flex-direction:row;justify-content:flex-start;white-space:nowrap;padding:8px;gap:8px}.palette .palette-submenu svg{width:29px;height:25px}
#workspace{position:relative;height:calc(100dvh - 186px);overflow:hidden}#paper{position:absolute;width:100%;height:100%;display:block;touch-action:none}.canvas-tools{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:3px;background:#ffffffee;border:1px solid var(--line);padding:4px;border-radius:11px;box-shadow:0 3px 12px #25344005;z-index:2}.canvas-tools button{font-size:13px;padding:7px 9px}.paper-tools{position:absolute;top:16px;right:16px;display:flex;gap:7px;align-items:center;padding:4px;background:#ffffffec;border-radius:9px;z-index:2}.paper-tools select{background:#fff;font-size:13px}.floating{position:absolute;background:#ffffffef;border:1px solid #e8edf0;border-radius:12px;box-shadow:0 7px 26px #00000008;z-index:2;max-height:calc(100% - 97px);overflow:auto;scrollbar-width:thin;backdrop-filter:blur(8px)}#leftPanel{left:16px;top:76px;width:220px}#rightPanel{right:16px;top:76px;width:250px}.panel-head{padding:13px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-weight:600}.panel-head span{font-size:12px;color:var(--muted);font-weight:400}.panel-head button{padding:2px 4px;font-weight:400;font-size:12px}.panel-body{padding:13px 14px}.empty-panel{padding:15px 14px;color:#a0aab2;font-size:13px}.object-list{display:grid;gap:3px;max-height:126px;overflow:auto;padding:6px}.object-item{justify-content:flex-start;padding:6px 8px;font-size:13px;width:100%}.object-item .dot{width:7px;height:7px;border-radius:50%;background:#c1ccd5}.object-item.active .dot{background:#000000}.object-item .item-unit{margin-left:auto;color:var(--muted);font-size:12px}.section-label{font-size:12px;letter-spacing:.05em;color:var(--muted);margin:16px 0 9px}.section-label:first-child{margin-top:0}.field{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:7px;margin:8px 0}.field label{font-size:13px}.input-unit{display:flex;align-items:center;gap:5px}.input-unit span{font:12px Cambria,var(--ui);color:var(--muted);flex-shrink:0}.field input{padding:6px 7px;font-size:13px}.xyrow{display:grid;grid-template-columns:1fr 1fr;gap:7px}.xyrow .field{grid-template-columns:18px 1fr}.small-actions{display:flex;gap:3px;margin:10px -3px 0;flex-wrap:wrap}.small-actions button{font-size:12px;padding:6px 7px}.small-actions .danger{color:#bf6254}.force-card{border:1px solid #e7ebef;border-radius:8px;padding:10px;margin-top:9px}.force-card-head{display:flex;justify-content:space-between;align-items:center;font:italic 15px Cambria,serif;color:var(--red)}.force-card button{padding:2px 5px;font-size:12px}.state-select{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:12px}.state-select button{font-size:12px;padding:4px 7px;background:#f3f6f8}.state-select button.active{background:#e9f1ff;color:#000000}.state-title{font-size:13px;display:flex;align-items:center;justify-content:space-between;margin:12px 0 7px}.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{padding:9px 10px;background:#f8fafc;border-radius:7px;min-height:61px}.stat label{color:var(--muted);font:italic 14px Cambria,var(--ui);display:block;margin-bottom:6px}.stat strong{font:500 19px Cambria,var(--ui)}.stat small{margin-left:4px;font-size:11px}.vectorline{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:7px;font-size:12px;padding:6px 0}.vectorline b{font:italic 16px Cambria,serif;font-weight:400}.force-swatch{display:inline-block;width:20px;height:2px;background:currentColor}.equation{font:italic 15px Cambria,"Times New Roman",serif;line-height:1.9;margin:10px 0;color:#657789;overflow-wrap:anywhere}.graph{width:100%;height:105px;display:block}.graph-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:5px}.canvas-note{position:absolute;bottom:15px;left:20px;font-size:12px;color:#93a1aa;pointer-events:none;display:flex;gap:17px}.scale-line{display:inline-block;width:60px;border-top:1px solid #9aa6af;border-left:1px solid #9aa6af;border-right:1px solid #9aa6af;height:5px;margin-right:6px}.canvas-coordinate{position:absolute;bottom:15px;right:22px;font:12px Cambria,var(--ui);color:#8795a0;pointer-events:none}.hint{position:absolute;left:50%;top:19px;transform:translateX(-50%);font-size:13px;color:var(--blue);background:#f2f7ff;padding:8px 12px;border-radius:8px;pointer-events:none;z-index:3}.hint:empty{display:none}
footer{height:110px;border-top:1px solid var(--line);display:flex;align-items:center;padding:17px 25px;gap:23px;background:#fff;position:relative;z-index:4}.transport{display:flex;gap:5px;align-items:center}.play{background:var(--ink);color:#fff;border-radius:9px;padding:12px 17px;font-size:14px}.play:hover{background:#000000}.play svg{width:17px;height:17px;fill:currentColor;stroke:currentColor}.timebar{flex:1;min-width:150px}.time-top{display:flex;justify-content:space-between;align-items:center;margin:0 1px 11px}.time-top .current{font:20px Cambria,var(--ui)}.time-top .current small{font:12px var(--ui);margin-left:6px}.timeline-wrap{position:relative;height:26px}.timeline-wrap input{width:100%;margin:0}.time-ticks{display:flex;justify-content:space-between;font:12px Cambria,var(--ui);color:var(--muted);margin-top:2px}.time-setting{display:flex;gap:9px;align-items:center}.time-node{display:flex;flex-direction:column;gap:4px}.time-node label{color:var(--muted);font:12px Cambria,var(--ui)}.time-node input{width:72px;padding:7px}.time-setting select{margin-top:15px}.playback{font-size:12px}.toast{position:fixed;bottom:128px;left:50%;transform:translateX(-50%);max-width:min(650px,90%);background:#000000;color:white;padding:10px 16px;border-radius:9px;font-size:13px;z-index:40;box-shadow:0 4px 20px #00000025;opacity:0;transition:opacity .15s;pointer-events:none}.toast.show{opacity:1}
dialog{border:1px solid var(--line);border-radius:15px;box-shadow:0 20px 90px #1e2b3a30;color:var(--ink);padding:0;max-height:80vh;width:700px;max-width:92vw}dialog::backdrop{background:#00000030;backdrop-filter:blur(2px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 25px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:18px;margin:0;font-weight:650}.modal-content{padding:18px 25px 27px;overflow:auto;max-height:65vh;font-size:14px;line-height:1.8}.modal-content h3{font-size:15px;margin-top:21px}.modal-content table{border-collapse:collapse;width:100%;font-size:13px}.modal-content td,.modal-content th{padding:9px 7px;border-bottom:1px solid var(--line);text-align:left}.modal-content a{color:var(--blue)}.modal-content code{font:13px monospace;background:#f4f7f9;padding:2px 5px}.drop-photo{padding:40px 25px;border:1px dashed #b9c8d7;border-radius:10px;text-align:center;margin:10px 0}.photo-preview{display:block;max-width:100%;max-height:250px;margin:auto}.photo-tools{display:flex;justify-content:center;gap:8px;margin:13px 0}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.example-grid button{border:1px solid var(--line);padding:17px;text-align:left;justify-content:flex-start;flex-direction:column;align-items:flex-start}.example-grid b{font-size:14px}.example-grid span{font:14px Cambria,var(--ui);color:var(--muted)}
@media(max-width:1100px){header{gap:9px;padding:0 12px}.brand b{font-size:15px}.palette button{padding:5px 7px}#leftPanel{width:190px}#rightPanel{width:218px}.field{grid-template-columns:59px 1fr}.floating .panel-body{padding:12px}.canvas-tools button{padding:7px}.canvas-tools{gap:1px}footer{gap:13px;padding:15px}.time-setting{gap:5px}.time-node input{width:62px}.header-actions button{padding:7px}}
@media(max-width:760px){header{height:108px;flex-wrap:wrap;gap:0;justify-content:space-between;padding:7px 10px}.brand{height:35px}.header-actions{height:35px}.palette{order:3;width:100%;height:52px;justify-content:space-between}.palette button{font-size:11px;min-width:35px;padding:4px 5px}.palette button svg{height:23px;width:25px}.brand b{font-size:14px}.header-actions button{font-size:12px;padding:6px}.header-actions .optional{display:none}#workspace{height:calc(100dvh - 238px)}.canvas-tools{top:9px;left:8px;gap:0;padding:2px}.canvas-tools button{font-size:12px;padding:6px}.canvas-tools button svg{width:17px;height:17px}.canvas-tools .word{display:none}.paper-tools{top:11px;right:8px;font-size:11px}.paper-tools select{max-width:80px;padding:5px;font-size:12px}#leftPanel{left:8px;top:59px;width:172px;max-height:calc(100% - 89px)}#rightPanel{right:8px;top:59px;width:190px;max-height:calc(100% - 89px)}.panel-head{font-size:12px;padding:9px 10px}.panel-body{padding:10px!important}.stat{padding:7px}.stat strong{font-size:16px}.field label{font-size:12px}.field{grid-template-columns:50px 1fr;gap:4px}.field input{font-size:12px}.floating{display:none}.floating.visible{display:block}.canvas-note{bottom:10px;left:10px}.canvas-coordinate{bottom:10px;right:10px}footer{height:130px;padding:10px;gap:8px;flex-wrap:wrap}.transport{gap:2px;width:125px}.play{padding:10px;font-size:13px}.transport button.icon{padding:6px}.transport .stepbtn{display:none}.timebar{flex:1}.time-setting{width:100%;justify-content:center;gap:8px}.time-node{flex-direction:row;align-items:center}.time-node input{width:65px;padding:5px}.time-setting select{margin-top:0;padding:5px}.time-top{margin-bottom:6px}.time-top .current{font-size:18px}.canvas-tools .divider{height:18px}.hint{top:auto;bottom:35px;max-width:90%;white-space:nowrap}.example-grid{grid-template-columns:1fr}}
#leftPanel{display:flex;flex-direction:column;overflow:hidden}.panel-head{flex-shrink:0}.object-list{max-height:min(320px,42vh);padding:7px;flex-shrink:0}.has-detail .object-list{max-height:145px}.object-item{padding:8px 9px;gap:7px}.object-item .object-name{overflow:hidden;text-overflow:ellipsis}.object-item .item-unit{font-size:11px}.item-chevron{font-size:18px;color:#97a7b3;width:10px}.object-item.expanded{background:#edf3fd}.object-item.expanded .item-chevron{color:#000000}#inspector{display:none;overflow:auto;min-height:0;border-top:1px solid var(--line);padding-top:0;scrollbar-width:thin}.detail-head{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:10px 0 5px;position:sticky;top:0;z-index:3;font-size:12px;color:var(--muted)}.detail-head button{font-size:11px;padding:3px 5px}.detail-actions{display:flex;gap:6px;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:34px;padding:3px 0 9px;z-index:2}.detail-actions button{font-size:12px;padding:6px 10px;border:1px solid #e5ebef}.detail-actions .danger{color:#bb6658;border-color:#eddcd7}.live-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;font:12px Cambria,var(--ui);color:#84929e;background:#f7f9fc;padding:10px 8px;border-radius:7px}.live-grid b{font-weight:500;color:#425f79}.detail-actions button.active{border-color:#c8d9f4;background:#edf3fd}@media(max-width:760px){#leftPanel{display:none}#leftPanel.visible{display:flex}.has-detail .object-list{max-height:105px}}
.velocity-components{font:italic 13px Cambria,var(--ui);color:#75889a;margin-top:10px}

.analysis-select-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 5px;font-size:12px;color:var(--muted);flex-shrink:0}.analysis-select-head label{display:flex;gap:7px;align-items:center;color:var(--ink);cursor:pointer}.analysis-select-head input,.object-item input{width:16px;height:16px;margin:0;flex-shrink:0;cursor:pointer}.object-item{display:flex;align-items:center;padding:2px 7px;border-radius:7px;min-height:37px}.object-item.active{background:#f3f6fb}.object-edit{min-width:0;flex:1;background:transparent;font-size:13px;justify-content:flex-start;text-align:left;padding:7px 2px;gap:7px}.object-edit .object-name{white-space:nowrap;min-width:0}.object-edit .item-unit{flex-shrink:0}.object-edit:hover{background:transparent}.object-item:hover{background:#f5f7fa}.object-item.expanded{background:#edf3fd}.analysis-card+.analysis-card{margin-top:20px;padding-top:9px;border-top:1px solid var(--line)}.analysis-empty{font-size:12px;color:var(--muted);padding:5px 0}.collision-summary{font-size:12px;padding:6px 5px;white-space:normal;line-height:1.5;background:#f5f7f9}.world-field{grid-template-columns:130px minmax(0,1fr)}.world-field select{width:100%;font-size:13px}

/* Compact toolbar layout for ten component types. */
@media(max-width:1100px){.palette button{padding:5px 5px;font-size:11px}.palette button svg{width:27px}.brand b{font-size:14px}.brand{gap:6px}}
@media(max-width:760px){.palette button{min-width:28px;padding:4px 3px;font-size:10px;gap:2px}.palette button svg{width:23px;height:24px}}

/* Shape controls stay independent from paper material. */
.paper-tools{gap:9px;padding:5px 6px 5px 10px}.skin-control{display:flex;align-items:center;gap:5px;white-space:nowrap}.skin-control>span{font-size:11px;color:var(--muted)}.paper-tools .skin-control select{min-width:104px;max-width:126px;padding:7px 5px;font-size:12px}.paper-tools #fitBtn{padding:6px}.paper-tools #fitBtn svg{width:20px;height:20px}
@media(max-width:760px){.paper-tools{top:9px;right:8px;display:grid;grid-template-columns:1fr 26px;gap:0 4px;padding:3px 4px 3px 7px}.skin-control{gap:3px;height:28px}.skin-control>span{font-size:10px}.paper-tools .skin-control select{width:99px;min-width:0;max-width:99px;padding:5px 2px;font-size:11px}.paper-tools #fitBtn{grid-column:2;grid-row:1 / 3;padding:3px;align-self:center}#leftPanel,#rightPanel{top:82px;max-height:calc(100% - 111px)}}


/* Component list and independent parameter window. */
#leftPanel{width:220px;max-height:calc(100% - 97px)}
#leftPanel .object-list{max-height:none;overflow:auto;flex:1;min-height:0;padding:6px}
.object-item{min-height:52px;padding:3px 8px;gap:9px;border-radius:8px}
.object-item.active,.object-item.expanded{background:#f1f1f1}
.object-item:hover{background:#f6f6f6}
.object-edit{padding:6px 1px;gap:10px;width:100%}
.object-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:30px;color:#000}
.object-icon svg{width:32px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.object-copy{display:grid;gap:3px;min-width:0;flex:1}
.object-edit .object-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.object-edit .item-unit{font-size:10px;color:#8a8a8a;margin:0}
.item-chevron{font-size:18px;color:#949494;width:8px;flex-shrink:0}
.object-item.expanded .item-chevron{color:#000}
#parameterPanel{left:248px;top:76px;width:270px;z-index:3;max-height:calc(100% - 97px);overflow:auto;overscroll-behavior:contain}
#parameterPanel #inspector{border:0;padding:0 14px 14px;overflow:visible}
#parameterPanel .detail-head{padding:12px 0 9px;margin:0;min-height:58px;color:#000;border-bottom:1px solid var(--line)}
.inspector-heading{display:flex;align-items:center;gap:9px;min-width:0;max-width:calc(100% - 28px)}
.inspector-heading>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.inspector-heading small{display:block;font-size:10px;font-weight:400;color:#8a8a8a;margin-top:3px}
#parameterPanel .detail-actions{top:58px;padding:9px 0 8px;margin:0;border-bottom:1px solid var(--line);justify-content:flex-end}
#parameterPanel .detail-actions button{font-size:11px;padding:5px 9px;background:#fff}
#parameterPanel .field input,#parameterPanel .field select{width:100%;min-width:0}
#parameterPanel .section-label{letter-spacing:0;color:#777}
@media(max-width:1100px){#leftPanel{width:190px}#parameterPanel{left:218px;width:254px}.object-edit{gap:7px}.object-item{padding:3px 6px}}
@media(max-width:760px){#leftPanel{width:172px}#parameterPanel{left:188px;top:82px;width:calc(100% - 196px);max-width:270px;max-height:calc(100% - 111px)}#parameterPanel #inspector{padding:0 11px 11px!important}.object-icon,.object-icon svg{width:27px}.object-edit{gap:5px}.object-edit .object-name{font-size:12px}}
@media(max-width:600px){#parameterPanel{left:8px;right:auto;width:min(300px,calc(100% - 16px));max-width:none;z-index:6;box-shadow:0 9px 32px #00000020}#parameterPanel .field{grid-template-columns:68px 1fr}#parameterPanel .xyrow .field{grid-template-columns:18px 1fr}}
/* End independent parameter window. */

footer{height:124px;padding:14px 25px;gap:20px}
.time-top{gap:12px;margin-bottom:6px}
.time-top .current{min-width:95px;white-space:nowrap}
.timeline-wrap{height:46px}
.time-markers{position:relative;height:31px;margin:1px 2px 0;touch-action:none}
.time-marker{position:absolute;top:0;transform:translateX(-50%);padding:0;width:32px;height:30px;display:flex;align-items:center;flex-direction:column;gap:2px;background:none;border:0;border-radius:0;font:12px Cambria,var(--ui);color:var(--muted);cursor:ew-resize}
.time-marker i{display:block;width:7px;height:7px;border:1.5px solid #000;border-radius:50%;background:#fff}
.time-marker.selected{color:#000}
.time-marker.selected i{background:#000}
.time-marker.first{transform:translateX(-4px);align-items:flex-start}
.time-marker.last{transform:translateX(calc(-100% + 4px));align-items:flex-end}
.time-marker:hover{background:none;color:#000}
.time-marker:focus-visible{outline:1px solid #000;outline-offset:2px;border-radius:3px}
.time-marker-edit{display:flex;align-items:center;gap:5px;margin-left:auto;font:13px Cambria,var(--ui)}
.time-marker-edit input{width:75px;padding:4px 5px;min-width:0;font-size:12px}
.time-marker-edit label{min-width:17px;color:#000}
.time-marker-edit small{color:var(--muted);font:11px var(--ui)}
.time-marker-edit button{padding:2px 5px;font-size:17px;line-height:1}
.time-marker-edit button:disabled{opacity:.25;cursor:default}
.add-time-point{padding:5px 8px;white-space:nowrap;border:1px solid var(--line);border-radius:5px;font-size:12px}
@media(max-width:1100px){footer{padding:12px 15px;gap:12px}.time-top{gap:7px}.time-marker-edit input{width:61px}}
@media(max-width:760px){footer{height:142px;padding:9px;gap:7px}#workspace{height:calc(100dvh - 250px)}.time-top{gap:4px}.time-top .current{min-width:73px;font-size:16px}.time-marker-edit{gap:3px}.time-marker-edit input{width:49px;padding:3px}.add-time-point{padding:4px;font-size:11px}.time-marker-edit small{display:none}.time-setting{gap:7px}.time-markers{margin-top:0}}
#workspace{height:calc(100dvh - 200px)}
@media(max-width:760px){#workspace{height:calc(100dvh - 250px)}}

.segment-heading{display:flex;justify-content:space-between;align-items:center}.segment-heading span{font:12px Cambria,var(--ui);color:#888}.rope-segments{display:grid;gap:7px}.rope-segment-row{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:3px 7px;padding:9px;border:1px solid var(--line);border-radius:7px;background:#fff}.rope-segment-row>button{display:grid;gap:4px;min-width:0;padding:0;justify-items:start;text-align:left;align-items:start}.rope-segment-row b{font-size:12px;font-weight:500}.rope-segment-row small{font-size:10px;color:#777;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.rope-segment-row .input-unit input{padding:5px;width:100%;min-width:0;font-size:12px}.rope-segment-row .segment-length{grid-column:1 / -1;font:11px Cambria,var(--ui);color:#888}.rope-segment-row input:focus{border-color:#000;outline:1px solid #000}.rope-segment-row input[aria-invalid="true"]{border-color:#bb6658}
.analysis-children{margin-left:15px;border-left:1px solid var(--line)}#leftPanel .object-list{flex:1;max-height:min(220px,25vh)}#compositionList,#assemblyList{flex:1;overflow:auto;min-height:0;padding:6px;max-height:min(250px,29vh);scrollbar-width:thin}.composition-head{border-top:1px solid var(--line);padding-top:11px}.composition-item .object-edit{font-size:13px}.composition-item.expanded .item-chevron{transform:rotate(90deg)}.composition-forces{display:grid;gap:7px;padding:5px 8px 11px 31px}.composition-force{display:flex;align-items:center;gap:7px;min-width:0;font:12px Cambria,var(--ui);cursor:pointer}.composition-force input{width:15px;height:15px;padding:0;margin:0;flex-shrink:0}.composition-force b{font-style:italic;font-weight:400;min-width:22px}.composition-force .composition-force-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;margin:0}.composition-force-icon svg{display:block;width:28px;height:28px}.composition-force [data-compose-value]{color:var(--muted);margin-left:auto;font-size:11px;white-space:nowrap}.composition-action{display:flex;align-items:center;gap:7px;margin-top:2px;min-width:0}.composition-action button{font-size:12px;padding:5px 9px;border:1px solid var(--line);flex-shrink:0}.composition-action button.active{background:#000;color:#fff;border-color:#000}.composition-result{font:11px Cambria,var(--ui);color:#666;overflow-wrap:anywhere}.composition-action button:disabled{opacity:.35;cursor:default}.assembly-actions{padding:8px 12px;display:flex;gap:5px;flex-wrap:wrap;flex-shrink:0;border-top:1px solid var(--line)}.assembly-actions input{width:calc(53% - 3px);min-width:0;padding:5px 6px;font-size:12px}.assembly-actions select{width:calc(47% - 3px);min-width:0;padding:5px 3px;font-size:11px}.assembly-actions button{font-size:11px;padding:5px 6px;border:1px solid var(--line)}.assembly-actions button:disabled{opacity:.35;cursor:default}.assembly-icon svg{width:28px;height:25px}.assembly-member-count{font:10px Cambria,var(--ui);color:var(--muted)}
/* Keep the sidebar compact until a section is opened. Native details retain
   keyboard access and their open state while component rows are refreshed. */
#leftPanel{overflow:auto;overscroll-behavior:contain}
.sidebar-section{flex-shrink:0;border-bottom:1px solid var(--line)}
.sidebar-section:last-child{border-bottom:0}
.sidebar-section>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:12px 13px;font-size:13px;font-weight:500;user-select:none}
.sidebar-section>summary::-webkit-details-marker{display:none}
.sidebar-section>summary::before{content:'›';font-size:20px;font-weight:400;line-height:16px;color:#8b969e;transition:transform .15s;flex-shrink:0}
.sidebar-section[open]>summary::before{transform:rotate(90deg);color:#000}
.sidebar-section>summary:hover{background:#f6f6f6}
.sidebar-section>summary:focus-visible{outline:2px solid #76a0e6;outline-offset:-3px;border-radius:5px}
.sidebar-section>summary small{margin-left:auto;font-size:10px;font-weight:400;white-space:nowrap}
.sidebar-section[open]>summary{background:#f8f9fa}
.sidebar-section .analysis-select-head{border:0;padding:9px 13px 4px;font-size:11px}
.sidebar-section .analysis-select-head label{font-size:12px}
#leftPanel .sidebar-section .object-list,#leftPanel .sidebar-section #compositionList,#leftPanel .sidebar-section #assemblyList{flex:none;max-height:min(300px,38vh);padding:5px 6px 8px}
.sidebar-section .assembly-actions{padding:10px 12px}
.sidebar-section .analysis-children:empty::after{content:'添加组块后在这里选择';display:block;padding:13px 9px;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:760px){.sidebar-section>summary{padding:10px;font-size:12px;gap:6px}.sidebar-section>summary small{font-size:9px}.sidebar-section .analysis-select-head{padding:8px 10px 3px}#leftPanel .sidebar-section .object-list,#leftPanel .sidebar-section #compositionList,#leftPanel .sidebar-section #assemblyList{max-height:min(235px,33vh)}}

.recognition-actions{display:flex;align-items:center;justify-content:space-between;margin:14px 0 7px;font-size:13px}.recognition-actions label,.recognition-row label{display:flex;align-items:center;gap:8px}.recognition-list{max-height:190px;overflow:auto;border:1px solid var(--line);border-radius:9px}.recognition-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 10px;font-size:13px}.recognition-row+.recognition-row{border-top:1px solid var(--line)}.recognition-row select{font-size:12px;max-width:130px}#inkTools{overflow-x:auto}

/* Local model library and touch workspace. */
.model-library-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.model-library-tools button,.model-actions button{border:1px solid var(--line)}.model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.model-card{border:1px solid var(--line);border-radius:11px;padding:14px;min-width:0}.model-card h3{margin:0 0 6px;overflow-wrap:anywhere}.model-card small{display:block;line-height:1.6}.model-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}.model-actions button{font-size:12px;padding:7px 9px}.model-new{min-height:160px;display:flex;flex-direction:column;border:1px dashed #aeb8bf;gap:10px}.model-new strong{font-size:34px;line-height:1}.model-name-form{display:grid;gap:12px}.model-name-form input{font-size:16px}.model-storage-note{padding:9px 12px;background:#fff7e5;border-radius:7px;font-size:12px;margin-bottom:12px}.model-active{font-size:12px;font-weight:400;color:#777}.mobile-panel-tools{display:none}.touch-menu{position:absolute;z-index:8;left:50%;bottom:48px;transform:translateX(-50%);background:white;border:1px solid var(--line);box-shadow:0 8px 36px #0002;border-radius:12px;padding:12px;max-width:calc(100% - 16px);min-width:250px}.touch-menu[hidden]{display:none}.touch-menu-head{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:13px}.touch-menu-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}.touch-menu button{border:1px solid var(--line);min-height:42px}.touch-menu input{width:84px;font-size:16px}.touch-menu .danger{color:#b54939}.touch-menu small{display:block;max-width:300px;margin-top:6px;font-size:11px;line-height:1.5}.canvas-tools button{touch-action:manipulation}.model-card button{touch-action:manipulation}
@media(pointer:coarse){button.icon,.canvas-tools button,.small-actions button,.model-actions button,.panel-head button,.header-actions button{min-width:44px;min-height:44px}input,select{font-size:16px}.palette-group>.palette-submenu{top:100%}.palette .palette-submenu button{min-height:44px}.object-edit{min-height:44px}.time-marker-hit{min-width:36px}}
@media(max-width:900px){header{height:116px;display:flex;flex-wrap:wrap;gap:0;justify-content:space-between;padding:6px 10px}.brand,.header-actions{height:44px}.brand b{font-size:14px}.header-actions button{min-height:40px;padding:6px 8px;font-size:12px}.palette{order:3;flex:0 0 100%;height:58px;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:2px;scrollbar-width:thin}.palette>button,.palette-group>button{min-width:51px;min-height:51px;font-size:11px;flex-shrink:0;padding:4px}.palette-group{flex-shrink:0}.palette-group:focus-within>.palette-submenu,.palette-group:hover>.palette-submenu{position:fixed;left:10px;top:112px;transform:none;z-index:30}.palette button svg{width:27px;height:25px}#workspace{height:calc(100dvh - 260px)}.canvas-tools{left:8px;right:8px;top:8px;gap:2px;padding:3px;width:max-content;max-width:calc(100% - 16px)}.canvas-tools button{min-width:40px;min-height:40px;padding:6px}.canvas-tools .word{display:none}.canvas-tools button svg{width:21px;height:21px}.canvas-tools .divider{height:24px}.paper-tools{top:60px;right:8px;display:flex;gap:4px;padding:3px 5px}.paper-tools .skin-control>span{display:none}.paper-tools .skin-control select{width:96px;min-width:0;max-width:96px;font-size:12px;padding:6px 3px}.paper-tools #fitBtn{padding:4px;min-width:36px;min-height:36px}.floating,#leftPanel{display:none}.floating.visible,#leftPanel.visible{display:flex}#leftPanel,#rightPanel,#parameterPanel{left:8px;right:8px;top:auto;bottom:48px;width:auto;max-width:none;max-height:min(46%,340px);z-index:6;border-radius:13px;box-shadow:0 8px 35px #0002}#rightPanel{flex-direction:column}#rightPanel .panel-body{overflow:auto}#parameterPanel{max-height:52%;bottom:48px;z-index:7}#parameterPanel .field{grid-template-columns:78px 1fr}#parameterPanel .xyrow .field{grid-template-columns:18px 1fr}.mobile-panel-tools{display:flex;position:absolute;right:8px;bottom:7px;gap:5px;z-index:3}.mobile-panel-tools button{border:1px solid var(--line);min-height:36px;padding:6px 11px;font-size:12px;background:#fffffff2}.canvas-note{bottom:15px;left:10px;font-size:10px}.canvas-note #worldSummary,.canvas-coordinate{display:none}.hint{top:auto;bottom:48px;max-width:90%;white-space:normal;text-align:center;z-index:4}footer{height:144px;padding:8px 10px;gap:8px;flex-wrap:wrap}.transport{width:115px;gap:2px}.transport .stepbtn{display:none}.timebar{min-width:150px;flex:1}.time-setting{width:100%;justify-content:center;gap:6px}.time-node{flex-direction:row;align-items:center}.time-node input{width:57px;padding:5px}.time-setting select{margin-top:0;padding:5px}.time-top{gap:5px;flex-wrap:wrap}.time-top .current{font-size:16px;min-width:80px}.time-top #seekStatus{display:none}.time-marker-edit input{width:57px}.time-top #addTimePoint{font-size:11px;padding:4px 6px}.timeline-wrap{height:37px}.time-markers{height:26px}.time-setting button{min-height:36px;min-width:36px}.modal-head{padding:14px 16px}.modal-content{padding:15px 16px 22px}.model-grid{grid-template-columns:1fr}.toast{bottom:155px}}
@media(max-width:400px){.brand svg{width:23px}.brand{gap:5px}.brand b{font-size:12px;letter-spacing:0}.header-actions{gap:0}.header-actions button{padding:5px 6px}.header-actions .icon{min-width:36px}.time-marker-edit label,.time-marker-edit small{display:none}.paper-tools .skin-control select{width:84px;max-width:84px}#workspace{min-height:180px}.model-library-tools button{flex:1}}


#inkTools{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;justify-content:flex-start}#inkTools>*{flex-shrink:0}
@media(max-width:400px){.time-node input{width:44px}.time-node{gap:3px}.time-setting{gap:4px}.time-setting select{padding:5px 3px}}

.photo-intro,.photo-crop-guide{color:var(--muted);font-size:13px;line-height:1.65;margin:8px 0 12px}.photo-steps{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:#4b5862;margin:12px 0 16px}.photo-steps b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;font-size:12px;margin-right:5px}.photo-mode-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:15px 0 9px;font-size:13px}.photo-mode-head span{color:var(--muted);font-size:12px}.photo-processing label{display:flex;align-items:center;gap:6px;padding:7px 9px;font-size:13px}.photo-processing button{font-size:13px}.photo-explanation,.photo-scale{font-size:13px;line-height:1.6;margin:10px 0;padding:9px 11px;background:#f7f9fa;border-radius:8px}.photo-explanation summary,.photo-scale summary{cursor:pointer}.photo-explanation p{margin:8px 0 0;color:var(--muted)}#photoCropStatus{color:var(--muted);font-size:12px;margin-right:auto}.photo-commit{margin-top:12px}.composition-action{flex-wrap:wrap}.composition-demo-guide{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 0;overflow-wrap:anywhere}.composition-action [hidden]{display:none}
.composition-canvas-guide{position:absolute;top:64px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 12px;background:#fffffff2;border:1px solid var(--line);border-radius:9px;box-shadow:0 4px 18px #00000006;z-index:3;font-size:12px;line-height:1.5}.composition-canvas-guide[hidden]{display:none}.composition-canvas-guide span{flex:1;min-width:150px}.composition-canvas-guide button{font-size:12px;padding:4px 7px}
#basicList{padding:6px;max-height:min(220px,25vh);overflow:auto}.assembly-members{display:grid;gap:4px}.assembly-members button{justify-content:flex-start;white-space:normal;font-size:12px}.assembly-members .item-chevron{margin-left:auto}
.analysis-card{border-bottom:1px solid var(--line);margin:0;padding:0}.analysis-card+.analysis-card{margin:0;padding:0;border-top:0}.analysis-card>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:54px;padding:8px 0;font-size:13px;user-select:none;touch-action:manipulation}.analysis-card>summary::-webkit-details-marker{display:none}.analysis-card>summary::after{content:'›';color:#8b969e;font-size:20px;margin-left:2px}.analysis-card[open]>summary::after{transform:rotate(90deg)}.analysis-card>summary .object-icon{width:27px}.analysis-card>summary b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.analysis-card>summary .muted{font-size:10px}.analysis-card-body{padding:0 0 14px}.analysis-card .section-label{margin-top:14px}.vectorline{grid-template-columns:36px 1fr auto}.vectorline b{white-space:nowrap}.graph{height:112px}.graph-key{display:flex;gap:12px;font:11px var(--ui);margin-top:6px}.graph-key span::before{content:'';display:inline-block;width:12px;border-top:2px solid currentColor;margin-right:4px;vertical-align:middle}.graph-key .vy::before{border-top-style:dashed}
.time-marker.has-parameter-change::after{content:"";position:absolute;width:5px;height:5px;background:#bc654d;border-radius:50%;top:0;right:0}
#leftPanel{overflow-y:auto;overscroll-behavior:contain}
.contact-list{padding:6px 10px 10px;overflow:auto;min-height:0;max-height:min(360px,45vh)}
.contact-pair{border-bottom:1px solid var(--line)}
.contact-pair-heading{display:flex;align-items:center;gap:6px;justify-content:flex-start;width:100%;min-height:43px;padding:8px 3px;font-size:12px;white-space:normal;text-align:left}
.contact-pair-heading>span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
.contact-pair-heading>small{font:11px Cambria,var(--ui);white-space:nowrap}
.contact-pair.expanded>.contact-pair-heading .item-chevron{transform:rotate(90deg)}
.contact-pair-fields{padding:2px 2px 10px}
.contact-list .field{grid-template-columns:76px minmax(0,1fr);gap:4px;margin:7px 0}
.contact-list .field label{font-size:12px;white-space:nowrap}
.contact-list select{width:100%;min-width:0;font-size:12px;padding:6px}
.contact-list input{font-size:12px;padding:6px}
.contact-list [aria-invalid="true"]{border-color:#bb6658;outline-color:#bb6658;background:#fff7f5}
.contact-effective{font:12px Cambria,var(--ui);padding:5px 0;display:flex;align-items:center;gap:5px;flex-wrap:wrap;overflow-wrap:anywhere}
.contact-effective small{font:10px var(--ui);margin-left:auto}
.contact-actions{display:flex;justify-content:space-between;gap:5px;margin-top:5px}
.contact-actions button{padding:5px 6px;font-size:11px;border:1px solid var(--line)}
.contact-actions .danger{color:#bb6658}
.contact-create-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.contact-create-button{width:100%;min-width:0;min-height:42px;padding:7px 8px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#000;font-family:"Microsoft YaHei","PingFang SC",var(--ui);font-size:14px;font-weight:700}
.contact-create-button:hover{background:#fff;border-color:#afb6bc}
.contact-create-button.active{background:#fff;border-color:#000;color:#000}
.contact-create-button svg{width:22px;height:22px;stroke-width:1.8}
#addContactBtn{font-size:24px;line-height:1}
#addContactBtn{font-size:27px;line-height:1}

/* Responsive shell. Mechanics and canvas coordinates remain device independent. */
:root {
  --app-height: 100dvh;
  --header-height: 76px;
  --timeline-height: 80px;
  --timeline-save-width: 52px;
  --timeline-dock-gap: 7px;
  --safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}
html, body { width: 100%; height: var(--app-height); overscroll-behavior: none; }
body { overflow: hidden; }
header {
  height: calc(var(--header-height) + var(--safe-top));
  padding: var(--safe-top) max(12px, var(--safe-right)) 0 max(12px, var(--safe-left));
  flex-wrap: nowrap; gap: 12px;
}
header .brand, header .header-actions { height: auto; flex-shrink: 0; }
header .header-actions { align-items: center; }
header .header-actions button { min-height: 40px; }
.palette { min-width: 0; order: 0; flex: 1; height: auto; overflow: visible; }
.palette-toggle, .paper-settings-toggle { display: none; }
.palette-group:hover > .palette-submenu,
.palette-group:focus-within > .palette-submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
}
#workspace { height: calc(var(--app-height) - var(--header-height) - var(--safe-top)); min-height: 0; }
.canvas-tools { left: max(12px, var(--safe-left)); top: 12px; right: auto; width: max-content; }
.canvas-tools button { min-width: 36px; min-height: 36px; }
.paper-tools { top: 12px; right: max(12px, var(--safe-right)); display: flex; padding: 4px; }
.paper-settings-content { display: flex; align-items: center; gap: 7px; }
.paper-tools .skin-control { height: auto; }
.paper-tools #fitBtn { grid-column: auto; grid-row: auto; min-width: 36px; min-height: 36px; }
#inkTools {
  left: 50%; right: auto; top: auto;
  bottom: calc(var(--timeline-height) + var(--safe-bottom) + 18px);
  transform: translateX(-50%); max-width: calc(100% - 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
}

/* A centered dock: half-screen timeline plus its adjacent save control. */
.timeline-dock {
  position: fixed; left: 50%; bottom: calc(10px + var(--safe-bottom)); transform: translateX(-50%);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--timeline-save-width);
  align-items: stretch; gap: var(--timeline-dock-gap);
  width: calc(50vw + var(--timeline-save-width) + var(--timeline-dock-gap));
  max-width: calc(100vw - 20px - var(--safe-left) - var(--safe-right)); z-index: 5;
}
footer.timeline-card {
  position: relative; left: auto; bottom: auto; transform: none;
  width: 100%; height: 80px; min-width: 0; display: grid; gap: 2px;
  grid-template-rows: 40px 26px; align-items: stretch;
  padding: 5px 8px; border: 1px solid #e2e5e8; border-radius: 12px;
  background: #ffffffed; box-shadow: 0 5px 24px #0000000d; backdrop-filter: blur(10px); z-index: 5;
}
.timeline-toolbar { display: flex; align-items: center; gap: 7px; min-width: 0; }
.transport { width: auto; gap: 3px; flex-shrink: 0; }
.transport button { min-width: 40px; min-height: 40px; height: 40px; padding: 6px; }
.transport .play { padding: 6px 12px; gap: 5px; }
.transport .stepbtn { display: inline-flex; }
.timeline-toolbar .current { max-width: 120px; overflow: hidden; text-overflow: ellipsis; font: 18px Cambria, var(--ui); white-space: nowrap; flex-shrink: 0; }
.timeline-toolbar .current small { font: 10px var(--ui); margin-left: 3px; }
.timeline-toolbar #seekStatus { min-width: 0; flex: 1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-toolbar .add-time-point { margin-left: auto; min-height: 40px; padding: 6px 8px; gap: 2px; flex-shrink: 0; }
.timeline-toolbar .timeline-settings-toggle { display: inline-flex; width: 40px; min-width: 40px; height: 40px; min-height: 40px; margin-left: 0; padding: 7px; flex-shrink: 0; }
.timebar { width: 100%; min-width: 0; }
.timeline-wrap { height: 26px; padding: 0 4px; }
.timeline-wrap input[type="range"] { display: block; height: 12px; width: 100%; margin: 0; touch-action: none; }
.time-markers { height: 16px; margin: 0 2px; }
.time-marker { height: 17px; min-height: 17px; width: 34px; flex-direction: row; justify-content: center; font-size: 11px; gap: 3px; touch-action: none; }
.time-marker.first { justify-content: flex-start; align-items: center; }
.time-marker.last { justify-content: flex-end; align-items: center; }
.time-marker i { flex-shrink: 0; width: 6px; height: 6px; }
.timeline-options {
  display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 7px); padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 24px #0002;
  max-height: calc(var(--app-height) - var(--timeline-height) - var(--header-height) - var(--safe-top) - var(--safe-bottom) - 28px);
  min-width: 0; overflow: auto; overscroll-behavior: contain;
}
footer.settings-open .timeline-options { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.time-marker-edit { margin-left: 0; gap: 4px; flex-shrink: 0; }
.time-options-caption { color: var(--muted); font: 11px var(--ui); margin-right: 3px; }
.time-marker-edit label, .time-marker-edit small { display: inline; }
.time-marker-edit input { width: 58px; min-height: 32px; padding: 5px; }
.time-marker-edit button { min-width: 32px; min-height: 32px; padding: 4px; }
.time-setting { width: auto; gap: 6px; justify-content: flex-start; min-width: 0; flex-wrap: wrap; }
.time-node { flex-direction: row; align-items: center; gap: 4px; }
.time-node label { font-size: 12px; }
.time-node input { width: 53px; min-height: 32px; padding: 5px; }
.time-setting select { margin-top: 0; min-height: 32px; padding: 5px 4px; font-size: 12px; }
.time-setting #worldBtn { min-width: 34px; min-height: 34px; padding: 5px; }
.quick-save-model {
  position: relative; right: auto; bottom: auto; align-self: stretch;
  width: var(--timeline-save-width); height: auto; min-width: 40px; min-height: 40px;
  padding: 11px; border: 1px solid #e2e5e8; border-radius: 12px;
  background: #fffffff5; box-shadow: 0 4px 18px #0000000c; z-index: 5;
}
.quick-save-model svg { width: 24px; height: 24px; }
.toast { bottom: calc(var(--timeline-height) + var(--safe-bottom) + 24px); }
.popup-menu { max-height: calc(var(--app-height) - var(--header-height) - var(--safe-top) - 16px); overflow-y: auto; overscroll-behavior: contain; }
dialog { max-height: calc(var(--app-height) - 20px - var(--safe-top) - var(--safe-bottom)); }
.modal-content { max-height: calc(var(--app-height) - 105px - var(--safe-top) - var(--safe-bottom)); overscroll-behavior: contain; }

/* Width, height and input capability all participate in compact mode. */
html[data-compact="true"] { --header-height: 55px; }
html[data-compact="true"] header { justify-content: flex-start; padding-left: calc(8px + var(--safe-left)); padding-right: calc(8px + var(--safe-right)); gap: 7px; }
html[data-compact="true"] .brand { gap: 5px; }
html[data-compact="true"] .brand svg { width: 25px; height: 25px; }
html[data-compact="true"] .brand b { font-size: 13px; letter-spacing: 0; }
html[data-compact="true"] .palette-toggle { display: inline-flex; min-height: 40px; padding: 6px 9px; gap: 5px; border: 1px solid var(--line); }
html[data-compact="true"] .palette-toggle svg { width: 19px; height: 19px; }
html[data-compact="true"] .header-actions { margin-left: auto; height: auto; gap: 1px; }
html[data-compact="true"] .header-actions button { min-width: 40px; min-height: 40px; padding: 6px 8px; font-size: 12px; }
html[data-compact="true"] .palette {
  position: fixed; top: calc(var(--header-height) + var(--safe-top) + 6px);
  left: calc(8px + var(--safe-left)); right: calc(8px + var(--safe-right));
  width: auto; height: auto; max-height: calc(var(--app-height) - var(--header-height) - var(--safe-top) - 28px);
  display: none; flex: none; padding: 8px; gap: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: #fffffff8; box-shadow: 0 9px 35px #00000017; overflow-y: auto; overscroll-behavior: contain; z-index: 25;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); align-items: stretch;
}
html[data-compact="true"] .palette.open { display: grid; }
html[data-compact="true"] .palette > button,
html[data-compact="true"] .palette .palette-submenu button {
  width: 100%; min-width: 0; min-height: 48px; padding: 5px; flex-direction: column; gap: 2px;
  justify-content: center; font-size: 11px; white-space: normal; border: 1px solid #eef0f2;
}
html[data-compact="true"] .palette button svg { width: 29px; height: 23px; }
html[data-compact="true"] .palette-group,
html[data-compact="true"] .palette-group > .palette-submenu { display: contents; }
html[data-compact="true"] .palette-group > button { display: none; }
html[data-compact="true"] .canvas-tools { top: 8px; left: calc(8px + var(--safe-left)); right: auto; gap: 1px; padding: 3px; max-width: calc(100% - 68px - var(--safe-left) - var(--safe-right)); overflow-x: auto; scrollbar-width: none; }
html[data-compact="true"] .canvas-tools::-webkit-scrollbar { display: none; }
html[data-compact="true"] .canvas-tools button { min-width: 40px; min-height: 40px; padding: 7px; flex-shrink: 0; }
html[data-compact="true"] .canvas-tools button svg { width: 21px; height: 21px; }
html[data-compact="true"] .canvas-tools .word { display: none; }
html[data-compact="true"] .canvas-tools .divider { height: 24px; }
html[data-compact="true"] .paper-tools { top: 8px; right: calc(8px + var(--safe-right)); padding: 3px; gap: 0; background: #fffffff0; border: 1px solid var(--line); border-radius: 11px; z-index: 3; }
html[data-compact="true"] .paper-settings-toggle { display: inline-flex; min-width: 40px; min-height: 40px; padding: 7px; }
html[data-compact="true"] .paper-settings-content { display: none; position: absolute; right: 0; top: calc(100% + 5px); padding: 9px; min-width: 205px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 7px 24px #0001; }
html[data-compact="true"] .paper-tools.settings-open .paper-settings-content { display: grid; gap: 5px; }
html[data-compact="true"] .paper-tools .skin-control { min-height: 40px; gap: 8px; }
html[data-compact="true"] .paper-tools .skin-control > span { display: inline; font-size: 12px; }
html[data-compact="true"] .paper-tools .skin-control select { font-size: 14px; width: 140px; max-width: 140px; min-width: 0; min-height: 40px; }
html[data-compact="true"] .paper-tools #fitBtn { width: 100%; min-height: 40px; border: 1px solid var(--line); }
html[data-compact="true"] #leftPanel,
html[data-compact="true"] #rightPanel { display: none; }
html[data-compact="true"] #leftPanel.visible,
html[data-compact="true"] #rightPanel.visible { display: flex; flex-direction: column; }
html[data-compact="true"] #leftPanel,
html[data-compact="true"] #rightPanel,
html[data-compact="true"] #parameterPanel {
  top: 62px; bottom: auto; width: min(310px, calc(100% - 16px - var(--safe-left) - var(--safe-right)));
  max-width: none; max-height: max(100px, calc(100% - var(--timeline-height) - var(--safe-bottom) - 88px));
  border-radius: 12px; box-shadow: 0 7px 28px #00000016; z-index: 6; overflow: auto; overscroll-behavior: contain;
}
html[data-compact="true"] #leftPanel { left: calc(8px + var(--safe-left)); right: auto; }
html[data-compact="true"] #rightPanel { right: calc(8px + var(--safe-right)); left: auto; }
html[data-compact="true"] #parameterPanel { left: calc(8px + var(--safe-left)); right: auto; top: 8px; max-height: max(110px, calc(100% - var(--timeline-height) - var(--safe-bottom) - 34px)); z-index: 7; }
html[data-compact="true"] #parameterPanel .field { grid-template-columns: 78px minmax(0, 1fr); }
html[data-compact="true"] #parameterPanel .xyrow .field { grid-template-columns: 18px minmax(0, 1fr); }
html[data-compact="true"] .panel-head { min-height: 43px; padding: 6px 11px; font-size: 13px; }
html[data-compact="true"] .panel-head button { min-width: 40px; min-height: 40px; padding: 5px; font-size: 20px; }
html[data-compact="true"] .sidebar-section > summary { min-height: 44px; padding: 10px 12px; font-size: 13px; }
html[data-compact="true"] .object-edit { min-height: 44px; }
html[data-compact="true"] .contact-pair-heading { min-height: 44px; }
html[data-compact="true"] .contact-list input,
html[data-compact="true"] .contact-list select { min-height: 40px; font-size: 16px; }
html[data-compact="true"] .contact-list .field { grid-template-columns: 82px minmax(0, 1fr); }
html[data-compact="true"] .contact-list { max-height: min(380px, 50vh); }
html[data-compact="true"] .contact-actions button { min-height: 40px; }
html[data-compact="true"] .contact-create-button { min-height: 44px; }
html[data-compact="true"] .floating .small-actions button,
html[data-compact="true"] .assembly-actions button { min-height: 40px; }
html[data-compact="true"] #rightPanel .panel-body { overflow: auto; }
html[data-compact="true"] .mobile-panel-tools { display: flex; position: absolute; right: calc(8px + var(--safe-right)); bottom: calc(var(--timeline-height) + 22px + var(--safe-bottom)); flex-direction: column; gap: 5px; z-index: 3; }
html[data-compact="true"] .mobile-panel-tools button { min-width: 48px; min-height: 40px; padding: 6px 8px; background: #fffffff0; border: 1px solid var(--line); font-size: 12px; }
html[data-compact="true"] .canvas-note { bottom: 14px; left: calc(10px + var(--safe-left)); font-size: 10px; }
html[data-compact="true"] .canvas-note #worldSummary,
html[data-compact="true"] .canvas-coordinate { display: none; }
html[data-compact="true"] .hint { top: auto; bottom: calc(var(--timeline-height) + var(--safe-bottom) + 22px); max-width: 82%; white-space: normal; text-align: center; }
html[data-compact="true"] .composition-canvas-guide { top: 60px; max-width: calc(100% - 24px); padding: 6px 9px; }
html[data-compact="true"] .touch-menu { bottom: calc(var(--timeline-height) + var(--safe-bottom) + 20px); max-height: calc(100% - var(--timeline-height) - 36px); overflow: auto; }
html[data-compact="true"] #inkTools { left: 50%; top: auto; max-width: calc(100% - 16px); }
html[data-compact="true"] footer.timeline-card { padding: 5px 6px; gap: 2px; border-radius: 12px; }
html[data-compact="true"] .timeline-toolbar { gap: 3px; }
html[data-compact="true"] .transport { gap: 1px; }
html[data-compact="true"] .transport button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 7px; }
html[data-compact="true"] .transport .play span { display: none; }
html[data-compact="true"] .timeline-toolbar .current { max-width: 80px; font-size: 16px; }
html[data-compact="true"] .timeline-toolbar .current small { font-size: 9px; margin-left: 1px; }
html[data-compact="true"] .timeline-toolbar #seekStatus { display: none; }
html[data-compact="true"] .timeline-toolbar .add-time-point { min-width: 40px; width: 40px; min-height: 40px; padding: 6px; font-size: 20px; margin-left: auto; }
html[data-compact="true"] .timeline-toolbar .add-time-point .word { display: none; }
html[data-compact="true"] .timeline-settings-toggle { display: inline-flex; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 7px; }
html[data-compact="true"] .timeline-wrap { height: 26px; }
html[data-compact="true"] .timeline-options {
  display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 7px); padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 5px 24px #0002;
  max-height: calc(var(--app-height) - var(--timeline-height) - var(--header-height) - var(--safe-top) - var(--safe-bottom) - 28px);
  overflow: auto; overscroll-behavior: contain;
}
html[data-compact="true"] footer.settings-open .timeline-options { display: grid; gap: 8px; }
html[data-compact="true"] .time-marker-edit { justify-content: space-between; width: 100%; }
html[data-compact="true"] .time-marker-edit input { width: 88px; min-height: 40px; font-size: 16px; }
html[data-compact="true"] .time-marker-edit button { min-width: 40px; min-height: 40px; }
html[data-compact="true"] .time-marker-edit small { display: inline; }
html[data-compact="true"] .time-setting { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 6px; }
html[data-compact="true"] .time-node { gap: 5px; width: 100%; }
html[data-compact="true"] .time-node input { width: 100%; min-height: 40px; font-size: 16px; }
html[data-compact="true"] .time-node:nth-child(1) { grid-column: 1; }
html[data-compact="true"] .time-node:nth-child(2) { grid-column: 2 / 4; }
html[data-compact="true"] .time-setting select { width: 100%; min-height: 40px; font-size: 14px; }
html[data-compact="true"] .time-setting #worldBtn { width: 40px; min-width: 40px; min-height: 40px; }
html[data-compact="true"] .modal-head { padding: 10px 15px; }
html[data-compact="true"] .modal-head h2 { font-size: 16px; }
html[data-compact="true"] .modal-head button { min-width: 40px; min-height: 40px; }
html[data-compact="true"] .modal-content { padding: 12px 15px 18px; }
html[data-compact="true"] .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (pointer: coarse) {
  input, select { font-size: 16px; }
  .model-actions button, .model-library-tools button { min-height: 44px; }
  .palette button { touch-action: none; }
  .timeline-wrap input[type="range"] { height: 12px; }
  .time-marker { height: 17px; }
  html[data-compact="true"] .timeline-wrap { height: 26px; }
}
@media (max-width: 560px) and (orientation: portrait) {
  .timeline-dock { width: calc(100vw - 20px - var(--safe-left) - var(--safe-right)); --timeline-save-width: 44px; --timeline-dock-gap: 5px; }
  footer.timeline-card { width: 100%; }
  html[data-compact="true"] .timeline-toolbar { gap: 2px; }
  html[data-compact="true"] .timeline-toolbar .current { font-size: 14px; max-width: 57px; min-width: 0; flex-shrink: 1; }
  html[data-compact="true"] .brand b { display: none; }
  html[data-compact="true"] .palette-toggle { padding: 6px; font-size: 12px; }
  html[data-compact="true"] .header-actions button { padding: 6px; min-width: 37px; }
  html[data-compact="true"] .mobile-panel-tools { bottom: calc(var(--timeline-height) + var(--safe-bottom) + 82px); }
  html[data-compact="true"] .canvas-note { bottom: calc(var(--timeline-height) + var(--safe-bottom) + 22px); }
  html[data-compact="true"] .model-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) and (orientation: landscape) {
  html[data-compact="true"] .brand b { display: none; }
  html[data-compact="true"] footer.timeline-card { padding: 5px 6px; }
  html[data-compact="true"] .timeline-toolbar { gap: 2px; }
  html[data-compact="true"] .timeline-toolbar .current { font-size: 13px; max-width: 55px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-section > summary::before, .toast { transition: none; }
}