/* nmt-3d bundle styles — extracted from pyramide project */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
:root{--bg:#f4ede0;--bg-grid:#e8dfcd;--paper:#fffaf0;--ink:#2b2118;--ink-2:#5a4a3a;--ink-3:#8a7860;--line:rgba(43,33,24,0.14);--line-2:rgba(43,33,24,0.28);--accent:#c4622a;--accent-soft:#f3d9c2;--shadow-1:0 1px 2px rgba(43,33,24,0.06),0 4px 16px rgba(43,33,24,0.07);--shadow-2:0 12px 40px rgba(43,33,24,0.18);}
html,body{height:100%;font-family:'Inter',-apple-system,system-ui,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 10%,#faf3e3 0%,transparent 60%),radial-gradient(circle at 90% 90%,#efe5cf 0%,transparent 50%),var(--bg);background-attachment:fixed;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);background-size:32px 32px;opacity:0.45;pointer-events:none;z-index:0;}
main{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:56px 32px 120px;}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:32px;}
.hero h1{font-size:44px;font-weight:700;letter-spacing:-0.02em;line-height:1.05;}
.hero h1 .accent{color:var(--accent);}
.hero p{margin-top:10px;color:var(--ink-2);font-size:16px;max-width:520px;text-wrap:pretty;}
.hero-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-3);text-align:right;line-height:1.7;}
.hint{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;background:var(--paper);border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink-2);}
.hint .kbd{font-family:'JetBrains Mono',monospace;font-size:11px;padding:2px 6px;background:rgba(43,33,24,0.06);border-radius:4px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform 0.18s,box-shadow 0.18s;display:flex;flex-direction:column;}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);}
.card-head[draggable="true"]{cursor:grab;}
.card-head[draggable="true"]:active{cursor:grabbing;}
.card-head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;border-bottom:1px solid var(--line);}
.grip{font-family:'JetBrains Mono',monospace;color:var(--ink-3);letter-spacing:-2px;font-size:14px;cursor:grab;}
.card-title{font-size:15px;font-weight:600;flex:1;letter-spacing:-0.01em;}
.card-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-3);}
.expand{background:transparent;border:1px solid var(--line);border-radius:6px;width:28px;height:28px;cursor:pointer;color:var(--ink-2);font-size:14px;display:grid;place-items:center;}
.expand:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.stage{position:relative;width:100%;aspect-ratio:1/1;background:radial-gradient(ellipse at center bottom,rgba(43,33,24,0.08) 0%,transparent 55%),linear-gradient(180deg,rgba(255,250,240,0) 0%,rgba(243,217,194,0.18) 100%);}
.toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:10px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(244,237,224,0.5),rgba(244,237,224,0.85));}
.tool{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:var(--paper);border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:500;color:var(--ink-2);cursor:pointer;font-family:inherit;}
.tool:hover{border-color:var(--line-2);color:var(--ink);}
.tool.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.tool-icon{font-size:13px;line-height:1;}
.tool.replay{margin-left:auto;}
.slider-wrap{display:flex;align-items:center;gap:8px;padding:4px 10px;background:var(--paper);border:1px solid var(--line);border-radius:8px;flex:1 1 140px;min-width:120px;}
.slider-label{font-size:11px;color:var(--ink-3);font-family:'JetBrains Mono',monospace;}
.slider{flex:1;height:4px;appearance:none;background:var(--line);border-radius:2px;outline:none;}
.slider::-webkit-slider-thumb{appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:2px solid var(--paper);}
.fs-overlay{position:fixed;inset:0;background:rgba(43,33,24,0.78);backdrop-filter:blur(8px);z-index:100;display:none;align-items:center;justify-content:center;padding:32px;}
.fs-overlay.open{display:flex;}
.fs-window{background:var(--paper);border-radius:18px;width:100%;max-width:1100px;height:100%;max-height:800px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;}
.fs-head{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line);}
.fs-head h2{font-size:22px;font-weight:600;}
.fs-head .meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-3);flex:1;}
.fs-close{background:transparent;border:1px solid var(--line);border-radius:8px;width:36px;height:36px;cursor:pointer;font-size:18px;}
.fs-stage{position:relative;background:linear-gradient(180deg,rgba(255,250,240,0) 0%,rgba(243,217,194,0.2) 100%);}
.fs-tools{border-top:1px solid var(--line);padding:10px 14px;}
.fs-tools .toolbar{padding:0;border:0;background:transparent;}
.demo-toggle{position:fixed;bottom:24px;right:24px;z-index:50;background:var(--ink);color:var(--paper);border:0;padding:12px 18px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;box-shadow:var(--shadow-2);}
.demo-toggle.active{background:var(--accent);}
.demo-board{position:fixed;left:24px;right:24px;bottom:80px;height:440px;background:linear-gradient(rgba(43,33,24,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(43,33,24,0.06) 1px,transparent 1px),var(--paper);background-size:24px 24px;border:2px dashed var(--line-2);border-radius:16px;z-index:40;display:none;box-shadow:0 -8px 30px rgba(43,33,24,0.18);}
.demo-board.open{display:block;}
.demo-board.drag-over{border-color:var(--accent);background-color:var(--accent-soft);}
.demo-board::before{content:'Демо-дошка — перетягни картки сюди';position:absolute;top:12px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-3);pointer-events:none;}
.demo-board.has-items::before{display:none;}
.board-item{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-1);overflow:hidden;display:flex;flex-direction:column;}
.bi-head{display:flex;align-items:center;padding:6px 8px;border-bottom:1px solid var(--line);cursor:move;background:rgba(244,237,224,0.6);flex:0 0 auto;}
.bi-name{flex:1;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bi-close{background:transparent;border:0;font-size:18px;cursor:pointer;color:var(--ink-3);line-height:1;padding:0 4px;}
.bi-stage{flex:1;min-height:0;width:100%;}
.bi-tools{flex:0 0 auto;display:flex;gap:3px;padding:5px 6px 16px;border-top:1px solid var(--line);background:rgba(244,237,224,0.5);position:relative;}
.bi-tools .toolbar{padding:0;border:0;background:transparent;width:100%;gap:3px;flex-wrap:wrap;}
.bi-tools .tool{padding:4px 6px;font-size:11px;border-radius:6px;min-width:26px;justify-content:center;}
.bi-tools .tool .tool-label{display:none !important;}
.bi-tools .tool .tool-icon{font-size:13px;}
.bi-tools .slider-wrap{flex:1 1 70px;min-width:60px;padding:3px 6px;order:99;width:100%;}
.bi-tools .slider-label{display:none;}
.bi-tools .tool.replay{padding:4px 8px;order:100;}
.bi-tools .tool.replay .tool-label{display:inline !important;font-size:10px;}
.mini-toolbar{display:flex;gap:3px;width:100%;}
.mini-tool{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:4px 0;font-size:13px;cursor:pointer;color:var(--ink-2);font-family:inherit;line-height:1;}
.mini-tool:hover{border-color:var(--line-2);color:var(--ink);}
.mini-tool.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.mini-tool.replay{background:var(--accent);color:var(--paper);border-color:var(--accent);}
.bi-resize{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--ink-3) 50%,var(--ink-3) 60%,transparent 60%,transparent 70%,var(--ink-3) 70%,var(--ink-3) 80%,transparent 80%);opacity:0.6;z-index:5;}
.bi-resize:hover{opacity:1;}


/* ----- geo2d.css ----- */
/* geo2d.css — additions for the dynamic 2D geometry gallery */

/* highlight free vs derived points on hover */
.geo-pt.geo-free:hover { filter: brightness(1.1); }

.gallery-switch {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 18px;
}
.gallery-switch a {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.gallery-switch a.active {
  background: var(--ink);
  color: var(--paper);
}

/* Make geo stage have crisp paper bg */
.geo-stage {
  background:
    radial-gradient(ellipse at center, rgba(196,98,42,0.04) 0%, transparent 70%),
    var(--paper);
}

/* Tighter card meta for geometry list */
.card-meta-geo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
}
.card-meta-geo .pill {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(196, 98, 42, 0.12);
  color: var(--accent);
}

/* Drag handle hint on the board: a tiny chip */
.board-item-geo .bi-head { background: rgba(59,123,155,0.08); }

/* Make the toolbar wrap nicely with more toggles */
.toolbar { gap: 6px; }
.tool { white-space: nowrap; }