:root { --ink:#1c1915; --muted:#6b645b; --line:#e6e1d8; --paper:#f4f1eb; --brand:#1c3d34; --card:#fff; }
body { background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
.topbar { height:64px; display:flex; align-items:center; gap:18px; padding:0 28px; background:rgba(255,255,255,.9); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; backdrop-filter:blur(10px); }
.brand { font-weight:700; color:var(--brand); text-decoration:none; letter-spacing:-.03em; }
.topbar a { color:var(--muted); text-decoration:none; }
.topbar a.on, .topbar a:hover { color:var(--ink); }
.grow { flex:1; }
.pill { background:#e5f2ea; color:#1f6b45; border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; }
.who { font-size:14px; }
.wrap { width:min(980px, calc(100% - 32px)); margin:0 auto; padding:28px 0 64px; }
.btn { border-radius:999px; }
.btn-dark { background:var(--brand); border-color:var(--brand); }
.btn-outline-dark { border-color:#d9d3c8; }
.panel, .wizard-card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:0 12px 40px rgba(28,25,21,.04); }
.panel h2, .wizard-card h2 { font-size:20px; margin:0 0 8px; }
.empty-panel { text-align:left; }
.lesson { color:var(--muted); line-height:1.55; margin:0 0 16px; }
.mock-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; background:#fff6e8; border:1px solid #ead7b8; border-radius:16px; padding:12px 14px; margin-bottom:16px; }
.mock-bar p { margin:0; }
.mock-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.mock-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:10px; border-top:1px solid var(--line); }
.mock-row span { color:var(--muted); }
.panel .lesson:last-child { margin-bottom:0; }
.panel h1 { font-size:28px; letter-spacing:-.03em; margin:0 0 10px; }
.wizard { list-style:none; display:flex; gap:8px; padding:0; margin:0 0 22px; overflow:auto; }
.wizard li { display:flex; align-items:center; gap:8px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 6px; white-space:nowrap; }
.wizard li a { display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
.wizard b { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#f3efe8; font-size:12px; }
.wizard li.on { color:#fff; background:var(--brand); border-color:var(--brand); }
.wizard li.on b { background:rgba(255,255,255,.18); color:#fff; }
.choice-grid, .place-list { display:grid; gap:12px; }
.choice-grid { grid-template-columns:1fr 1fr; }
.choice, .place-card { display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px 18px; }
.choice:hover, .place-card:hover { border-color:#c9c2b6; }
.choice b, .place-card strong { font-size:18px; letter-spacing:-.02em; }
.choice span, .place-card span { color:var(--muted); }
.nextbar { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.quiet { margin-top:14px; color:var(--muted); }
.quiet summary { cursor:pointer; }
.quiet-links { margin:-8px 0 16px; color:var(--muted); font-size:13px; }
.quiet-links a { color:var(--muted); }
.auth-body { min-height:100vh; display:grid; place-items:center; }
.auth-card { width:min(420px, 92vw); background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px; }
.auth-card h1 { font-size:28px; }
.crumb, .crumb a { color:var(--muted); font-size:13px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px; }
.page-head h1 { margin:6px 0 0; font-size:32px; letter-spacing:-.03em; }
.chip { display:inline-block; align-self:flex-start; background:#e7efe9; color:var(--brand); border-radius:999px; padding:4px 10px; font-size:12px; font-weight:650; }
.scale-pick { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.scale-option { display:block; margin:0; }
.scale-option input { position:absolute; opacity:0; }
.scale-option span { display:block; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff; min-height:92px; }
.scale-option b { display:block; }
.scale-option small { display:block; color:var(--muted); margin-top:4px; line-height:1.35; }
.scale-option input:checked + span { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.scale-board { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.scale-col { background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; }
.scale-col h2 { font-size:16px; margin:0 0 6px; }
.scale-col p { color:var(--muted); font-size:13px; }
.place { display:block; text-decoration:none; color:inherit; border-top:1px solid var(--line); padding:10px 0; }
.place strong { display:block; }
.place span, .empty { color:var(--muted); font-size:13px; }
.tabs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0 16px; }
.tabs a { text-decoration:none; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:14px; }
.tabs a.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.study-grid { display:grid; grid-template-columns: 1fr 240px; gap:16px; }
.player-wrap { position:relative; background:#111; border-radius:12px; overflow:hidden; }
.player { width:100%; background:#111; max-height:420px; display:block; }
.play-toggle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#1c1915; font-size:22px; }
.play-toggle[hidden] { display:none; }
.player-tools { display:flex; gap:6px; margin-top:8px; }
.player-tools button { border:1px solid var(--line); background:#fff; border-radius:8px; min-width:36px; height:32px; padding:0 8px; }
.player-tools button.on { background:var(--brand); color:#fff; border-color:var(--brand); }
.step-list { display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.step-list button { text-align:left; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.stats { display:flex; flex-direction:column; gap:8px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.stat b { display:block; font-size:22px; }
.stat span { color:var(--muted); font-size:13px; }
.stat.va b { color:#1f6b45; }
.stat.ne b { color:#8a6420; }
.stat.wa b { color:#8d342d; }
.timeline-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink); }
.zoom-controls { display:flex; gap:4px; }
.zoom-controls button { width:28px; height:28px; border:1px solid var(--line); background:#fff; border-radius:8px; line-height:1; }
#timeline { margin-top:6px; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
#timeline .vis-panel.vis-top { height:38px !important; overflow:hidden; }
#timeline .vis-panel.vis-center,
#timeline .vis-panel.vis-left,
#timeline .vis-panel.vis-right { top:38px !important; }
#timeline .vis-time-axis .vis-text.vis-major { display:none !important; }
#timeline .vis-time-axis .vis-text.vis-minor { top:1px !important; height:16px !important; line-height:16px !important; padding:0 0 0 4px; font-size:11px; overflow:hidden; }
.frame-ruler { position:absolute; right:0; top:22px; height:14px; pointer-events:none; z-index:2; }
.frame-ruler i { position:absolute; bottom:0; width:1px; height:6px; background:#b7b1a8; }
.frame-ruler b { position:absolute; bottom:6px; transform:translateX(-50%); font-size:9px; font-weight:550; color:#6b645b; white-space:nowrap; }
.vis-custom-time { background-color:#e23d2f !important; width:2px; z-index:5; pointer-events:auto; cursor:ew-resize; }
.vis-custom-time::before { content:""; position:absolute; top:0; left:-5px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid #e23d2f; }
.vis-timeline, .vis-panel.vis-center, .vis-panel.vis-left { overflow-y:hidden !important; }
.inst { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.inst img, .clip { width:220px; height:124px; object-fit:cover; border-radius:8px; background:#24312e; }
.tag { border-radius:999px; padding:2px 8px; font-size:12px; background:#eee; }
.tag.value_added { background:#e5f2ea; color:#1f6b45; }
.tag.necessary_waste { background:#f8efd8; color:#8a6420; }
.tag.waste { background:#f8e8e6; color:#8d342d; }
.combo { position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px; }
.combo-row { display:grid; grid-template-columns: 180px 1fr; gap:10px; align-items:center; margin:8px 0; }
.combo-bar { height:18px; background:#f6f3ee; border-radius:6px; position:relative; }
.combo-bar i { display:block; height:100%; border-radius:6px; position:absolute; top:0; }
.combo-bar i.value_added { background:#2f6f4e; }
.combo-bar i.necessary_waste { background:#c4a15a; }
.combo-bar i.waste { background:#a33b32; }
.combo-bar i.machine { background:#355e86; }
.takt { position:absolute; top:8px; bottom:8px; border-left:1.5px dashed var(--brand); }
.takt span { position:absolute; top:-2px; right:6px; font-size:11px; color:var(--brand); white-space:nowrap; }
.vis-item.value_added { background:#2f6f4e; border-color:#1f4a34; color:#fff; }
.vis-item.necessary_waste { background:#c4a15a; border-color:#8a6420; color:#fff; }
.vis-item.waste { background:#a33b32; border-color:#6e241f; color:#fff; }
@media (max-width: 900px) {
  .study-grid, .choice-grid { grid-template-columns: 1fr; }
  .page-head { align-items:flex-start; flex-direction:column; }
  .topbar { padding-left:16px; padding-right:16px; }
}