*{box-sizing:border-box}body{margin:0;background:#eff2ef;color:#243a35;font:14px system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.32;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e69137;outline-offset:3px}main{display:grid;grid-template-columns:310px minmax(0,1fr);height:100vh;height:100dvh}.sidebar-closed main{grid-template-columns:0 minmax(0,1fr)}aside{padding:24px 20px;overflow:auto;background:#fff;border-right:1px solid #dce3dd}.sidebar-closed aside{visibility:hidden;padding:0;overflow:hidden}h1{font-size:26px;line-height:1.1;margin:0 0 10px}p{line-height:1.5}.sub{font-size:12px;color:#65746e}.group{border-top:1px solid #e0e7e2;margin-top:22px;padding-top:17px}label{display:block;margin:11px 0}aside input[type=range],select{width:100%;margin-top:9px}select,aside button{padding:8px;border:1px solid #c6d3ca;border-radius:7px;background:#fff;color:inherit}aside button{margin:3px 1px}.n{font-variant-numeric:tabular-nums;font-weight:650}.tag{display:inline-block;background:#e5eee8;border-radius:5px;padding:4px 7px;font-size:12px}a{color:#25624f}input[type=number]{width:90px;padding:5px}#stage{position:relative;min-width:0;min-height:0;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}#load{position:absolute;top:100px;left:20px;background:white;padding:14px;border-radius:8px}.floating{background:#ffffffed;border:1px solid #d4dfd6;box-shadow:0 4px 20px #263f3520;backdrop-filter:blur(10px)}#toolbar{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:3px;padding:6px;border-radius:13px;max-width:calc(100% - 134px);overflow-x:auto;scrollbar-width:thin;z-index:4}.tool{width:38px;height:38px;border:0;border-radius:8px;background:transparent;color:#52655b;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:8px}.tool svg{width:22px;height:22px;fill:currentColor;pointer-events:none}
#downloadPart{display:inline-flex;align-items:center;gap:5px}#downloadPart svg{width:16px;height:16px;fill:currentColor}.tool:hover:not(:disabled){background:#e8eee9}.tool.active,.tool[aria-pressed=true]{background:#244e40;color:white}.divider{width:1px;height:24px;background:#dfe6e0;margin:0 4px;flex:0 0 auto}#views{position:absolute;right:18px;top:18px;display:grid;grid-template-columns:1fr 1fr;border-radius:11px;padding:5px;gap:3px;z-index:4}#views button{border:0;border-radius:6px;color:#52655b;background:transparent;padding:8px 5px;font-size:11px}#views button:hover{background:#e8eee9}#levelRail{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:76px;padding:13px 7px;border-radius:16px;display:flex;align-items:center;flex-direction:column;gap:6px;z-index:4}#levelRail b{font-size:11px;letter-spacing:.04em}#railValue{font-size:21px;line-height:1.1;font-weight:650}#levelVertical{writing-mode:vertical-lr;direction:rtl;width:26px;height:clamp(120px,30vh,280px);margin:3px 0;accent-color:#2f6351;cursor:pointer}#levelRail .tool{height:30px;width:32px;padding:6px}#levelRail .separator{width:36px;height:1px;background:#dfe6e0;margin:3px 0}.rail-caption{font-size:10px;color:#6f8076}#levelToast{position:absolute;left:20px;top:83px;padding:6px 10px;background:#ffffffc7;border:1px solid #dfe6df;border-radius:7px;color:#586e60;font-size:12px;pointer-events:none}#groundScale{position:absolute;right:20px;bottom:14px;color:#647969;font-size:11px;pointer-events:none}#hint{position:absolute;left:20px;bottom:14px;color:#5f7365;font-size:11px;max-width:calc(100% - 165px);pointer-events:none}#selectionCard{position:absolute;left:20px;bottom:49px;padding:15px 17px;width:300px;max-width:calc(100% - 125px);border-radius:13px;border-left:4px solid #e8943c;z-index:3}#selectionCard[hidden]{display:none}#selectedId{font-size:20px;letter-spacing:.025em}#selectedMeta{max-height:115px;overflow:auto;overflow-wrap:anywhere;white-space:pre-line;font-size:12px;line-height:1.55;color:#607366;margin:6px 0 8px}.card-top{display:flex;justify-content:space-between;align-items:center;gap:6px}.card-top .tool{height:26px;width:26px;padding:5px}.card-actions{display:flex;gap:5px;align-items:center;margin:9px 0 0}#downloadPart{border:1px solid #c9d7cd;border-radius:6px;padding:5px 8px;text-decoration:none;font-size:11px}#pullRange{width:100%;accent-color:#d78635;margin:4px 0}#pullReadout{float:right}.card-note{font-size:10px;line-height:1.5;color:#738278;margin:6px 0 0}#notice{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:#254b3f;color:#fff;font-size:12px;padding:9px 14px;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:6}#notice.show{opacity:1}#info{font-size:12px;line-height:1.55;overflow-wrap:anywhere}#helpText{display:none;position:absolute;top:80px;left:20px;padding:16px 18px;border-radius:12px;max-width:360px;z-index:6;font-size:12px;line-height:1.8}#helpText.open{display:block}#helpText b{display:block;margin-bottom:5px}kbd{background:#edf1ed;border:1px solid #d6dfd7;border-radius:4px;padding:0 4px;font-size:11px}
@media(max-width:850px){main{grid-template-columns:270px minmax(0,1fr)}#toolbar{left:10px;top:10px;max-width:calc(100% - 20px)}#views{top:74px;right:10px}#levelRail{right:10px;width:62px;top:54%}#levelToast{left:10px;top:74px;max-width:calc(100% - 112px);font-size:10px}#selectionCard{left:10px;bottom:38px;padding:11px 12px;max-width:calc(100% - 89px);width:280px}#hint{left:10px;bottom:10px;font-size:10px}#selectedId{font-size:17px}#helpText{left:10px;top:122px;max-width:calc(100% - 90px)}}
@media(max-width:600px){#groundScale{bottom:44px;right:12px;font-size:10px}main{grid-template-columns:1fr;grid-template-rows:minmax(280px,58dvh) minmax(0,42dvh)}aside{grid-row:2;padding:16px}#stage{grid-row:1}.sidebar-closed main{grid-template-columns:1fr;grid-template-rows:1fr}.sidebar-closed aside{display:none}#levelVertical{height:clamp(95px,23vh,190px)}#levelRail{padding:8px 4px}#hint{max-width:calc(100% - 20px)}#selectionCard{bottom:42px}#toolbar{gap:1px}.tool{width:36px;height:36px}.divider{margin:0 2px}}

/* ---- Touch devices (phones/tablets): no page zoom, no text selection, touch texts ---- */
*{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
canvas{touch-action:none}
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}
html,body{height:100%;overflow:hidden}
.for-touch{display:none}
@media (hover:none) and (pointer:coarse){
.for-mouse{display:none}.for-touch{display:inline}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,select,textarea{font-size:16px}/* <16px makes iOS zoom on focus */
/* touch has no hover; sticky :hover must not hide pressed buttons */
.tool:hover:not(:disabled):not(.active):not([aria-pressed=true]),#views button:hover{background:transparent}
}
/* ---- Theme: dark glass panels (less white), mint accent ---- */
:root{--glass:rgba(18,32,28,.74);--glass-solid:rgb(75,87,83);--glass-line:rgba(255,255,255,.08);--ink:#dbe7e1;--ink-dim:#93a79d;--mint:#43d19a;--mint-ink:#082018}
.floating{background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 8px 28px rgba(10,24,20,.28);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);color:var(--ink)}
.tool{color:var(--ink);border-radius:10px}
.tool:hover:not(:disabled){background:rgba(255,255,255,.09)}
.tool.active,.tool[aria-pressed=true]{background:var(--mint);color:var(--mint-ink)}
.tool:disabled{opacity:.3}
.divider{background:rgba(255,255,255,.12)}
/* Г-layout */
#toolbar{max-width:none;overflow:visible;gap:2px;padding:5px;border-radius:14px}
#toolbarV{position:absolute;left:18px;top:74px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px;border-radius:14px;z-index:4}
#toolbarV .divider{width:24px;height:1px;margin:3px 0}
#levelToast{display:none}
/* views */
#views{grid-template-columns:repeat(4,auto);padding:4px;border-radius:12px}
#views button{color:var(--ink);font-size:12px;font-weight:550;padding:8px 10px;border-radius:8px}
#views button:hover{background:rgba(255,255,255,.09)}
/* level rail: slim, no captions */
#levelRail{width:48px;padding:8px 4px;gap:4px;border-radius:24px}
#levelRail>b,#railValue,.rail-caption{display:none}
#levelRail .tool{width:38px;height:34px;font-size:20px;font-weight:500}
#levelRail .separator{width:24px;background:rgba(255,255,255,.12)}
#levelVertical{-webkit-appearance:none;appearance:none;width:6px;height:clamp(140px,34vh,300px);margin:8px 0;border-radius:6px;background:linear-gradient(to top,var(--mint) calc(var(--p,1)*100%),rgba(255,255,255,.16) calc(var(--p,1)*100%));cursor:pointer}
#levelVertical::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 4px rgba(67,209,154,.25)}
#levelVertical::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#levelVertical::-moz-range-track{background:transparent}
/* selection card + help, dark */
#selectionCard{border-left:3px solid var(--mint)}
#selectedId{color:#fff}
#selectedMeta,.card-note,#selectionCard .sub{color:var(--ink-dim)}
#pullRange{accent-color:var(--mint)}
#downloadPart{color:var(--mint);border-color:rgba(67,209,154,.45)}
#helpText b{color:#fff}
#helpText kbd{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:var(--ink)}
#notice{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ---- Phones (iPhone 13 = 390x844) ---- */
@media(max-width:600px){
#toolbar{left:8px;top:calc(8px + env(safe-area-inset-top));right:auto;flex-wrap:nowrap}
#toolbar .divider{display:none}
#toolbarV{left:8px;top:calc(64px + env(safe-area-inset-top))}
.tool{width:40px;height:40px;padding:8px}
#views{top:calc(64px + env(safe-area-inset-top));right:8px;grid-template-columns:repeat(2,auto)}
#views button{padding:7px 9px;font-size:12px}
#levelRail{right:8px;top:58%;width:46px}
#helpText{top:calc(64px + env(safe-area-inset-top));left:64px;max-width:calc(100% - 72px);font-size:13px;line-height:1.6;max-height:calc(100% - 180px);overflow:auto}
#hint,#groundScale{display:none}
#selectionCard{bottom:calc(8px + env(safe-area-inset-bottom));left:8px;right:62px;width:auto;max-width:none;padding:8px 12px 10px}
#selectedId{font-size:16px}
#selectionCard .card-top .tool{width:34px;height:34px}
#selectedMeta{font-size:11px;line-height:1.45;max-height:34px;margin:0 0 4px}
#selectionCard label.sub{font-size:11px}
#pullRange{margin:2px 0}
.card-actions{margin:4px 0 0}
.card-actions .tool{width:38px;height:38px}
#downloadPart{padding:9px 12px;font-size:13px}
.card-note{display:none}
#notice{bottom:calc(60px + env(safe-area-inset-bottom))}
}
/* toast */
#notice{color:var(--ink);font-size:13px;font-weight:550;padding:10px 16px;border-radius:999px;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
/* pressed state must beat :hover (sticky hover on touch) */
.tool.active:not(:disabled),.tool[aria-pressed=true]:not(:disabled),.tool.active:hover,.tool[aria-pressed=true]:hover{background:var(--mint);color:var(--mint-ink)}
/* Г-dock: CSS grid, row 1 = #toolbar, row 2 = #toolbarV (no JS positioning) */
#dock{position:absolute;left:18px;top:18px;z-index:4;display:grid;grid-template-columns:max-content;justify-items:start}
#dock>#toolbar,#dock>#toolbarV{position:relative;left:auto;top:auto;right:auto;max-width:none;box-shadow:none;border:0}
#dock>#toolbar{border-radius:16px 16px 16px 0}
#dock>#toolbarV{border-radius:0 0 16px 16px;padding-top:4px}
#dock>#toolbarV::before{content:"";position:absolute;left:100%;top:0;width:16px;height:16px;background:var(--glass-solid);-webkit-mask:radial-gradient(circle at 100% 100%,transparent 15.5px,#000 16px);mask:radial-gradient(circle at 100% 100%,transparent 15.5px,#000 16px)}
@media(max-width:600px){#dock{left:8px;top:calc(8px + env(safe-area-inset-top))}}
.tool[hidden]{display:none}
/* Loading: panels hidden until the viewer is built, then fade in together */
#dock,#views,#levelRail{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
body.ready #dock,body.ready #views,body.ready #levelRail{opacity:1;visibility:visible;transition:opacity .3s}
#load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--glass);color:var(--ink);font-size:13px;font-weight:550;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);white-space:nowrap}
#load.error{white-space:normal;max-width:calc(100% - 32px);border-radius:14px}
#load.error .spinner{display:none}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--mint);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}