.design-tester{--panel-width:384px;grid-template-columns:minmax(0, 1fr) var(--panel-width);color:#111827;background:#f9fafb;height:calc(100dvh - 65px);min-height:0;display:grid}.lab-stage{background:radial-gradient(circle,#28303d59,#0000 48%),#0c1119;min-width:0;position:relative;overflow:hidden}.canvas-host{position:absolute;inset:0}.canvas-host canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block}.canvas-host canvas:active{cursor:grabbing}.stage-actions{pointer-events:auto;gap:7px;display:flex}.stage-actions--floating{z-index:3;position:absolute;top:22px;right:24px}.stage-actions button{color:#374151;backdrop-filter:blur(12px);cursor:pointer;background:#ffffffeb;border:1px solid #ffffffd9;border-radius:6px;align-items:center;gap:8px;padding:6px 10px;font-size:13px;display:inline-flex}.stage-actions button:hover{color:#1d4ed8;border-color:#bfdbfe}.stage-actions button span{background:#9ca3af;border-radius:50%;width:7px;height:7px}.stage-actions button span.active{background:#1d4ed8}.position-dock{z-index:3;backdrop-filter:blur(15px);background:#fffffff0;border:1px solid #e5e7ebf2;border-radius:8px;width:min(700px,100% - 44px);padding:16px 20px 12px;position:absolute;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 18px 60px #0000004d}.position-dock__head{color:#111827;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:14px;font-weight:500;display:flex}.position-dock__head strong{color:#1d4ed8;font-weight:600}.position-track{position:relative}.position-slider{-webkit-appearance:none;appearance:none;color:#2563eb;cursor:grab;touch-action:pan-y;background:0 0;width:calc(80% + 16px);height:18px;margin:-4px calc(10% - 8px) 0;padding:0;display:block}.position-slider:active{cursor:grabbing}.position-slider::-webkit-slider-runnable-track{background:#bfdbfe;border-radius:999px;height:2px}.position-slider::-moz-range-track{background:#bfdbfe;border-radius:999px;height:2px}.position-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#2563eb;border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-top:-7px;box-shadow:0 0 0 1px #1d4ed8}.position-slider::-moz-range-thumb{background:#1d4ed8;border:2px solid #fff;border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 1px #1d4ed8}.position-slider:focus-visible{outline-offset:5px;border-radius:999px;outline:2px solid #2563eb}.position-ticks{grid-template-columns:repeat(5,1fr);margin-top:4px;display:grid}.position-ticks button{z-index:1;color:#6b7280;cursor:pointer;background:0 0;border:0;flex-direction:column;align-items:center;gap:8px;font-size:12px;line-height:1;display:flex;position:relative}.position-ticks button i{background:#93c5fd;border-radius:50%;width:4px;height:4px;transition:all .16s}.position-ticks button:hover,.position-ticks button.selected{color:#1d4ed8}.position-ticks button.selected i{background:#2563eb;transform:scale(1.5)}.lab-panel{z-index:4;scrollbar-color:#d1d5db #fff;background:#fff;border-left:1px solid #e5e7eb;height:100%;position:relative;overflow-y:auto}.lab-panel header,.lab-panel section{border-bottom:1px solid #e5e7eb;padding:20px 24px}.lab-panel header h2{color:#111827;margin:0 0 4px;font-size:1.25rem;font-weight:600}.lab-panel header p,.lab-panel .section-note{color:#4b5563;margin:0;font-size:.875rem;line-height:1.5}.lab-panel section h3{color:#111827;margin:0 0 4px;font-size:1.125rem;font-weight:600}.drop-zone{color:#374151;cursor:pointer;background:#fff;border:2px dashed #d1d5db;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:94px;margin-top:12px;padding:16px;transition:all .16s;display:flex}.drop-zone:hover{background:#f9fafb;border-color:#1d4ed8}.drop-zone input{display:none}.drop-zone b{color:#2563eb;margin-bottom:4px;font-size:20px;line-height:1}.drop-zone span{color:#111827;text-overflow:ellipsis;white-space:nowrap;max-width:290px;font-size:16px;font-weight:500;display:block;overflow:hidden}.drop-zone small{color:#6b7280;margin-top:2px;font-size:14px}.spinner{border:2px solid #bfdbfe;border-top-color:#2563eb;border-radius:50%;width:19px;height:19px;animation:.8s linear infinite lab-spin}@keyframes lab-spin{to{transform:rotate(360deg)}}.error{color:#dc2626;margin-top:9px;font-size:13px;line-height:1.5}.text-button{color:#2563eb;cursor:pointer;background:0 0;border:0;margin-top:10px;padding:0;font-size:13px;text-decoration:underline}.fit-list{flex-direction:column;gap:4px;margin-top:16px;display:flex}.fit-list p{color:#374151;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;margin:0;font-size:14px;line-height:1.6;display:grid}.fit-list p span:nth-child(2){color:#111827;font-variant-numeric:tabular-nums}.fit-list p .fit-limit{color:#9ca3af}.fit-list p b{color:#15803d;font-size:12px}.fit-list p.bad,.fit-list p.bad span,.fit-list p.bad b{color:#dc2626}.fit-list p.bad .fit-limit{color:#f87171}.notice{border-radius:6px;margin-top:14px;padding:11px 12px;font-size:13px;line-height:1.55}.notice--bad{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}.notice--info{color:#1d4ed8;background:#eff6ff;border:1px solid #dbeafe}.fit-confirmation{color:#374151;margin:12px 0 0;font-size:14px}.notice p{margin:0}.notice button{color:#fff;cursor:pointer;background:#1d4ed8;border:0;border-radius:6px;width:100%;margin-top:10px;padding:8px 10px;font-size:14px;font-weight:500}.notice button:hover{background:#1e40af}.offset-controls{margin-top:18px}.offset-title{color:#374151;font-size:14px;font-weight:500;display:block}.offset-controls{border-top:1px solid #e5e7eb;padding-top:12px}.offset-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px;display:grid}.offset-grid label{background:#fff;border:1px solid #d1d5db;border-radius:6px;align-items:center;gap:6px;padding:4px 8px;display:flex}.offset-grid label span{color:#4b5563;font-size:14px}.offset-grid input{color:#111827;font-variant-numeric:tabular-nums;background:0 0;border:0;width:100%;min-width:0;font-size:14px}.offset-grid input:focus{outline:none}.offset-grid label:focus-within{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}.result-list{flex-direction:column;gap:5px;margin:18px 0;display:flex}.result-list button{color:#6b7280;cursor:pointer;background:0 0;border:0;border-radius:4px;grid-template-columns:70px 1fr 96px;align-items:center;gap:9px;width:100%;padding:5px 7px;font-size:14px;line-height:1;display:grid}.result-list button:hover,.result-list button.active{color:#1d4ed8;background:#eff6ff}.result-list button.worst{color:#b91c1c}.result-list button>i{background:#e5e7eb;border-radius:999px;height:8px;position:relative}.result-list button>i b{background:#1d4ed8;border-radius:999px;min-width:1px;height:100%;transition:width .3s;display:block}.result-list button>i em{opacity:.7;background:linear-gradient(currentColor,currentColor) 50%/100% 1px no-repeat;border-left:1px solid;border-right:1px solid;height:12px;position:absolute;top:-2px}.result-value{text-align:right;flex-direction:column;align-items:flex-end;gap:3px;display:flex}.result-value strong,.result-value small{display:block}.result-value strong{font-weight:600}.result-value small{color:#9ca3af;font-size:12px}.evaluate{color:#fff;cursor:pointer;background:#1d4ed8;border:1px solid #1d4ed8;border-radius:8px;justify-content:center;align-items:center;width:100%;min-height:48px;padding:0 24px;font-size:16px;font-weight:600;transition:background .15s;display:flex;position:relative;overflow:hidden}.evaluate:hover:not(:disabled){background:#1e40af}.evaluate:disabled{cursor:wait}.evaluate.blocked{color:#6b7280;cursor:not-allowed;background:#e5e7eb;border-color:#e5e7eb}.evaluate>i{background:#bfdbfe;height:2px;position:absolute;inset:auto auto 0 0}.score-summary{text-align:center;background:#f9fafb;border-radius:12px;margin-top:16px;padding:20px}.score-summary strong{color:#374151;font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;line-height:1.3;display:block}.score-summary.final strong{color:#1d4ed8}.score-summary strong small{color:#6b7280;font-size:14px;font-weight:500}.score-summary>span{color:#4b5563;font-size:14px;display:block}.submit-section .submit-hint{color:#6b7280;margin-bottom:12px;font-size:14px;line-height:1.55}.submit-section .submit-button{color:#fff;text-align:center;cursor:pointer;background:#1d4ed8;border:0;border-radius:8px;width:100%;padding:12px 24px;font-size:16px;font-weight:600;line-height:1.5;transition:background .15s;display:block}.submit-section .submit-button:hover:not(:disabled){background:#1e40af}.submit-section .submit-button:disabled{color:#6b7280;cursor:not-allowed;background:#e5e7eb}.submit-section .text-button{text-align:center;margin-top:10px;display:block}@media (width<=920px){.design-tester{grid-template-columns:1fr;height:auto;min-height:0}.lab-stage{height:min(72vh,720px);min-height:520px}.lab-panel{border-top:1px solid #e5e7eb;border-left:0;overflow:visible}.lab-panel header,.lab-panel section{padding-inline:max(24px,50vw - 340px)}}@media (width<=560px){.lab-stage{height:570px}.stage-actions{flex-direction:column}.position-dock{width:calc(100% - 24px);padding-inline:12px;bottom:14px}.position-ticks button span{font-size:10px}}