*{box-sizing:border-box}html,body{color:#1f2430;height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#app{height:100vh;display:flex}#sidebar{background:#fbfcfe;border-right:1px solid #dfe4ec;flex-direction:column;flex:0 0 270px;gap:10px;width:270px;padding:16px;display:flex;overflow-y:auto}#sidebar h1{margin:0;font-size:22px}.version{color:#5460cd;margin:0;font-size:12px;font-weight:600}.copyright{color:#6b7280;margin:0 0 6px;font-size:11px}button{color:#2b3480;cursor:pointer;background:#eef0fd;border:1px solid #6673d6;border-radius:6px;padding:8px 12px;font-size:13px}button:hover{background:#dfe3fb}button.primary{color:#fff;background:#6673d6}button.primary:hover{background:#5460cd}.row{align-items:center;gap:8px;display:flex}.row button{flex:1}label.check,label.scale{align-items:center;gap:6px;font-size:13px;display:flex}label.scale{margin-left:auto}label.field{color:#374151;flex-direction:column;gap:3px;font-size:12px;display:flex}label.field input{border:1px solid #cfd6e0;border-radius:6px;padding:6px 8px;font-size:13px}p.hint{margin:8px 0 0;font-size:13px}ul.hint{color:#374151;margin:0;padding-left:20px;font-size:13px}textarea{resize:vertical;border:1px solid #cfd6e0;border-radius:6px;width:100%;min-height:170px;padding:8px;font-family:ui-monospace,monospace;font-size:12px}#status{color:#6b7280;min-height:18px;font-size:12px}#status.error{color:#b3261e}#stage{flex:1;position:relative;overflow:hidden}#diagram{cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}#diagram.panning{cursor:grabbing}#samples{z-index:2;gap:8px;display:flex;position:absolute;bottom:14px;left:14px}