@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans JP',sans-serif;color:#252b36;background:#f4f5f7;font-synthesis:none;--blue:#4165e8;--line:#e8eaf0;--muted:#8a919e}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;transition:background .16s,color .16s,box-shadow .16s}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a2b4ff;outline-offset:3px}button{color:inherit}button:disabled{opacity:.5;cursor:wait}button:hover{filter:brightness(.97)}.topbar{height:87px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#222a38;font-size:18px;letter-spacing:2px;font-weight:700}.brand b{font-weight:400}.brand small{display:block;letter-spacing:2px;font-size:9px;color:#939aa6;margin-top:4px;font-weight:500}.brand-mark{position:relative;font-size:31px;letter-spacing:-3px;width:40px;height:43px;line-height:43px;border:1px solid #e0e4ed;border-radius:10px;text-align:center;font-weight:500}.brand-mark span{color:var(--blue);font-size:22px;position:absolute;top:-7px;right:1px}.top-note{font-size:12px;color:#818996;display:flex;align-items:center;gap:8px}.status-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:#6687ef}.header-actions{display:flex;gap:18px;align-items:center}.primary{border:0;background:var(--blue);color:#fff;padding:12px 18px;border-radius:7px;font-size:12px;display:flex;align-items:center;gap:8px;box-shadow:0 3px 6px #4165e81c}.primary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}.quiet{background:none;border:0;font-size:13px;color:#697280}.workspace{max-width:1800px;margin:0 auto;display:grid;grid-template-columns:236px minmax(360px,1fr) 304px;gap:18px;padding:24px 26px 16px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:12px}.model-panel,.preview-panel{padding:21px 18px}.section-heading{display:flex;justify-content:space-between;align-items:center;min-height:20px}.eyebrow{color:#9299a5;font-size:9px;letter-spacing:1.5px;font-weight:600}.tag{font-size:9px;background:#f2f3f6;padding:3px 6px;border-radius:4px;color:#9198a2}h2{font-size:17px;font-weight:600;margin:9px 0 0;letter-spacing:.3px}.intro{font-size:10px;margin:9px 0 20px}.muted{color:var(--muted)}.pose-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pose-card{border:1px solid #eceef2;background:#fafbfc;border-radius:8px;padding:7px 2px 9px;position:relative;min-height:86px}.pose-card svg{width:45px;height:51px;display:block;margin:auto;stroke:#8b94a3;fill:none;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}.pose-card span{font-size:10px;display:block;margin-top:4px;color:#727b89}.pose-card.active{background:#f0f3ff;border-color:#8ba1f3;box-shadow:0 0 0 1px #8ba1f31a}.pose-card.active svg{stroke:var(--blue)}.pose-card.active span{color:var(--blue);font-weight:600}.pose-card.active:after{content:'✓';position:absolute;right:6px;top:3px;font-size:9px;color:var(--blue)}.joint-editor{border-top:1px solid var(--line);margin-top:19px;padding-top:16px}.joint-editor summary{font-size:11px;list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.joint-editor summary span{color:#9299a5}.joint-editor .field-label{margin-top:14px}.joint-editor select{width:100%;margin:6px 0 13px}.joint-editor .control{margin-bottom:12px}.small-button{font-size:9px;border:1px solid var(--line);background:#f8f9fb;border-radius:5px;padding:8px 4px;width:100%}.model-options{border-top:1px solid var(--line);margin-top:17px;padding-top:19px}.label-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:12px}.label-row output{font-size:11px;color:var(--blue);font-variant-numeric:tabular-nums;background:#f3f5fc;padding:3px 6px;border-radius:4px;min-width:42px;text-align:center}.material-row,.background-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-top:20px}.swatches{display:flex;gap:7px}.swatch{width:19px;height:19px;border:2px solid #fff;background:var(--swatch);border-radius:50%;box-shadow:0 0 0 1px #e5e7ec;padding:0}.swatch.active{box-shadow:0 0 0 1.5px var(--blue)}.aside-tip{display:flex;align-items:center;gap:10px;background:#f7f8fb;border-radius:7px;padding:12px;margin-top:22px}.aside-tip>span{color:#8198d8;font-size:22px}.aside-tip p{font-size:9px;line-height:1.9;color:#959da9;margin:0}.scene-column{min-width:0;display:flex;flex-direction:column;gap:16px}.scene-card{overflow:hidden}.scene-toolbar{height:79px;padding:17px 22px;display:flex;align-items:center;justify-content:space-between}.scene-toolbar h2{font-size:17px;margin-top:5px}.view-tools{display:flex;gap:7px}.view-tools button{border:1px solid var(--line);border-radius:6px;background:#fff;width:30px;height:30px;font-size:18px;color:#939aa7}.view-tools button.active{color:var(--blue);background:#f1f4ff;border-color:#dce3fb}.scene-view{position:relative;height:470px;background:#f3f5f8;overflow:hidden;touch-action:none;cursor:grab}.scene-view:active{cursor:grabbing}.scene-view canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.mode-switch{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;border:1px solid #e3e7ef;background:#ffffffc9;border-radius:7px;padding:3px;z-index:2;white-space:nowrap;box-shadow:0 2px 6px #23365b05}.mode-switch button{border:0;background:none;font-size:10px;padding:7px 10px;color:#8790a0;border-radius:4px}.mode-switch button.active{background:#fff;color:var(--blue);box-shadow:0 1px 5px #25375312}.scene-badge{position:absolute;top:65px;left:20px;z-index:2;background:#fff9;padding:6px 9px;border-radius:20px;font-size:9px;display:flex;align-items:center;gap:6px;color:#7c8695}.axis-key{position:absolute;z-index:1;left:18px;bottom:48px;color:#9ba3b1;font-size:8px;letter-spacing:.5px}.axis-front{color:#8b9fe8}.axis-up{color:#98b5aa;margin-left:9px}.scene-help{z-index:1;position:absolute;bottom:17px;left:0;width:100%;text-align:center;font-size:9px;color:#a0a8b5;pointer-events:none}.scene-help span{margin:0 8px;color:#c1c7d1}.quick-angles{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:13px 19px;background:#fff}.quick-angles>span{font-size:9px;color:#a3aab6;margin-right:4px;letter-spacing:1px}.quick-angles button{border:1px solid transparent;background:#f8f9fb;border-radius:5px;padding:6px 10px;font-size:10px;color:#77818f}.quick-angles button.active{background:#edf1ff;color:var(--blue);border-color:#dfe6ff}.camera-panel{padding:17px 22px 15px}h3{font-size:12px;font-weight:600;margin:0}.text-button{background:none;border:0;color:var(--blue);font-size:10px}.camera-sliders{display:grid;grid-template-columns:1fr 1fr;gap:19px 28px;margin-top:21px}.control .label-row{margin-bottom:10px}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;background:linear-gradient(to right,#8ca1eb var(--progress,50%),#e7eaf1 var(--progress,50%));cursor:pointer;display:block;margin:8px 0;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--blue);border:2px solid white;box-shadow:0 0 0 1px #c3ceed}input[type=range]::-moz-range-thumb{width:8px;height:8px;background:var(--blue);border:2px solid white;border-radius:50%}.range-labels{display:flex;justify-content:space-between;font-size:8px;color:#a5adba;margin-top:9px}.target-row{border-top:1px solid var(--line);padding-top:16px;margin-top:18px;display:flex;align-items:center;gap:8px;font-size:9px;color:#929aa6;flex-wrap:wrap}.target-row>span{margin-right:4px;color:#596372}.target-row button{font-size:9px;border:0;border-radius:4px;background:#f7f8fa;padding:5px 8px;color:#8891a0}.target-row button.active{color:var(--blue);background:#edf1ff}.target-row label{margin-left:auto}.target-row input{width:60px}.target-row output{font-size:9px;width:37px;font-variant-numeric:tabular-nums}.live-tag{font-size:8px;color:#91a39a;letter-spacing:1px;display:flex;align-items:center;gap:5px}.live-tag i{width:5px;height:5px;background:#65ac8a;border-radius:50%}.preview-panel h2{margin-top:13px}.preview-panel .intro{font-size:9px;margin-bottom:21px}.phone-wrap{display:flex;justify-content:center;padding:0 4px 21px}.phone{width:220px;padding:7px;background:linear-gradient(110deg,#353944,#181a20);border-radius:30px;box-shadow:0 13px 24px -9px #1e23363d,0 0 0 1px #343944;position:relative}.phone:before{content:'';position:absolute;left:-3px;top:65px;width:2px;height:28px;background:#3c414b;border-radius:2px}.phone:after{content:'';position:absolute;right:-3px;top:86px;width:2px;height:42px;background:#3c414b;border-radius:2px}.phone-screen{width:100%;aspect-ratio:9/16;background:#eeece7;position:relative;border-radius:23px;overflow:hidden;touch-action:none;cursor:grab}.phone-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.phone-island{position:absolute;z-index:3;top:10px;left:50%;transform:translateX(-50%);height:15px;width:57px;border-radius:12px;background:#181a20;pointer-events:none}.phone-info{position:absolute;bottom:15px;left:15px;right:15px;display:flex;justify-content:space-between;z-index:3;font-size:8px;pointer-events:none}.phone-info span{background:#ffffff9c;padding:5px 8px;border-radius:5px;color:#6f736f}.thirds{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55}.thirds i{position:absolute;background:#fff}.thirds i:nth-child(1){width:1px;top:0;bottom:0;left:33.333%}.thirds i:nth-child(2){width:1px;top:0;bottom:0;left:66.666%}.thirds i:nth-child(3){height:1px;left:0;right:0;top:33.333%}.thirds i:nth-child(4){height:1px;left:0;right:0;top:66.666%}.field-label{font-size:9px;color:#929aa6;display:block}.segmented{display:flex;background:#f5f6f8;border:1px solid #edf0f5;border-radius:7px;padding:3px;margin-top:9px}.segmented button{flex:1;background:none;border:0;border-radius:5px;padding:7px 0 6px;font-size:12px;color:#939aa6}.segmented button small{display:block;font-size:8px;margin-top:3px;font-weight:400}.segmented button.active{background:#fff;color:var(--blue);box-shadow:0 1px 4px #22365112;font-weight:600}.preview-options{margin-top:18px;padding-top:17px;border-top:1px solid var(--line)}.preview-options>label{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:10px}.preview-options select{font-size:10px;max-width:142px}select{background:#fff;border:1px solid #e5e8ee;color:#6b7584;border-radius:5px;padding:7px 8px;font-size:11px}.toggle-row input{appearance:none;position:relative;width:27px;height:15px;border-radius:20px;background:#d7dce6;margin:0;cursor:pointer}.toggle-row input:after{content:'';width:11px;height:11px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0002;transition:transform .2s}.toggle-row input:checked{background:var(--blue)}.toggle-row input:checked:after{transform:translateX(12px)}.background-row{font-size:10px;margin-top:0}.footnote{font-size:8px;line-height:1.9;color:#a6adb8;border-top:1px solid var(--line);padding-top:14px;margin:19px 0 0}footer{padding:0 28px 18px;display:flex;justify-content:space-between;color:#a6adba;font-size:8px;letter-spacing:.8px;max-width:1800px;margin:auto}.footer-sep{padding:0 8px;color:#c3c9d3}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);background:#263044;color:#fff;padding:12px 22px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:20}#toast.show{opacity:1;transform:translate(-50%,0)}.load-error{position:absolute;inset:30%;z-index:5;background:white;padding:20px;color:#88444a;font-size:13px}.load-error[hidden]{display:none}
.pose-grid{max-height:440px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d7deee transparent;padding:2px}
@media(min-width:1500px){.workspace{grid-template-columns:256px minmax(400px,1fr) 330px;padding-top:28px;gap:22px}.scene-view{height:510px}.phone{width:239px}.pose-card{min-height:93px}.pose-card svg{height:56px}}
@media(max-width:1150px){.workspace{grid-template-columns:190px minmax(310px,1fr) 254px;padding:16px 14px;gap:12px}.model-panel,.preview-panel{padding:17px 13px}.phone{width:196px}.scene-toolbar{padding:15px}.camera-panel{padding:17px 15px}.scene-view{height:453px}.quick-angles{padding:12px 9px}.quick-angles button{padding:6px 7px}.quick-angles>span{display:none}.target-row label{margin-left:0}.pose-card span{font-size:9px}.topbar{padding:0 20px}.camera-sliders{gap:18px}}
@media(max-width:900px){.workspace{grid-template-columns:185px minmax(300px,1fr)}.preview-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;padding:20px 28px}.preview-panel>.section-heading,.preview-panel>h2,.preview-panel>.intro{grid-column:2}.preview-panel>h2{margin-top:8px}.preview-panel>.intro{margin-bottom:13px}.phone-wrap{grid-column:1;grid-row:1/8;padding:0;align-self:center}.phone{width:210px}.lens-control,.preview-options,.footnote{grid-column:2}.top-note{display:none}.scene-view{height:444px}.aside-tip{display:none}.camera-sliders{gap:15px}.pose-card{min-height:88px}}
@media(max-width:600px){.topbar{height:73px;padding:0 16px}.brand{font-size:14px;gap:8px;letter-spacing:1px}.brand-mark{width:32px;height:36px;font-size:27px;line-height:36px}.brand small{font-size:8px;letter-spacing:1px}.quiet{font-size:20px}.quiet span{display:none}.header-actions{gap:10px}.primary{padding:10px;font-size:10px}.primary svg{width:13px}.workspace{display:flex;flex-direction:column;padding:13px 10px;gap:13px}.model-panel{width:100%;padding:16px}.model-panel .intro{margin:6px 0 12px}.pose-grid{display:flex;overflow-x:auto;padding-bottom:6px;gap:7px}.pose-card{min-width:76px;min-height:84px}.pose-card svg{height:48px}.joint-editor{margin-top:8px;padding-top:12px}.model-options{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px}.model-options .label-row{min-width:109px;margin:0;gap:8px}.model-options>input{width:65px;flex:1}.material-row{margin:0 0 0 5px;gap:9px}.material-row>span{display:none}.scene-column{width:100%}.scene-view{height:410px}.camera-panel{padding:17px}.camera-sliders{gap:18px}.preview-panel{width:100%;display:block;padding:20px}.phone{width:236px}.preview-panel .intro{margin-bottom:20px}.phone-wrap{padding-bottom:24px}.lens-control,.preview-options,.footnote{max-width:340px;margin-left:auto;margin-right:auto}.preview-panel>.section-heading{max-width:none}.footnote{font-size:9px}.target-row label{margin-left:8px}.scene-toolbar{height:72px}.scene-help{font-size:8px}footer{padding:5px 16px 20px;font-size:7px}footer>span:last-child{display:none}.quick-angles{justify-content:space-around}.quick-angles button{font-size:10px}.joint-editor select{max-width:220px}.joint-editor .control{display:inline-block;width:31%;margin-right:2%}}
@media(max-width:600px){.pose-grid{max-height:none;overflow-y:hidden}}