/* «Slik virker det»: kodet speiling av Beatform Studio (Mac, lyst tema).
   Mål og farger følger appens Design/tokens.json og web-kit (bf.css). Tegnes i 1200 × 754 px og skaleres. */
.demo { --paper: #f4f0e9; --surface: #fbf9f5; --raised: #ece7de; --line: #e1dace; --line-strong: #cfc7b9;
  --ink: #1e1b16; --ink-2: #6a6258; --ink-3: #746b61; --glow: #f39a3d; --glow-text: #9e5410; --glow-wash: #f9e3cb;
  --moss: #6f8a5e; --clay: #b8654a; --dusk: #5a7189; --sand: #c9a66b;
  overflow: hidden; background: var(--paper); }
.demo-cam { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.demo .app { position: absolute; left: 0; top: 0; width: 1200px; height: 754px; transform-origin: 0 0; transform: scale(var(--k, .5));
  display: grid; grid-template-columns: 56px 1fr; background: var(--paper); color: var(--ink);
  font: 400 13px/1.35 var(--font-sans); -webkit-font-smoothing: antialiased; }
.demo .app .i { width: 16px; height: 16px; flex: none; }
.demo .app .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.demo .app .lbl { font: 500 10.5px/14px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* Venstre ikonlist */
.demo .rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-right: 1px solid var(--line); background: var(--paper); }
.demo .rail img { width: 28px; height: 28px; border-radius: 25%; margin-bottom: 8px; }
.demo .rail-b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-2); transition: background .25s, color .25s, transform .15s; }
.demo .rail-b.on { background: var(--raised); color: var(--ink); }
.demo .rail-b.new { background: var(--ink); color: var(--paper); margin: 4px 0 6px; }
.demo .rail-b.press { transform: scale(.9); }
.demo .rail .sp { flex: 1; }
.demo .rail .me { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 600 9px var(--font-mono); margin-top: 6px; }

.demo .main { position: relative; overflow: hidden; }
.demo .view { position: absolute; inset: 0; padding: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.demo .view.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.demo .top { height: 52px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.demo .top h4 { margin: 0; font: 600 17px/1 var(--font-sans); letter-spacing: -.01em; }
.demo .top .sp { flex: 1; }
.demo .top .ic-b { color: var(--ink-2); display: grid; place-items: center; width: 28px; height: 28px; }
.demo .field { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink-3); transition: border-color .2s, box-shadow .2s; }
.demo .field.focus { border-color: var(--ink-2); box-shadow: 0 0 0 3px rgba(30,27,22,.06); }
.demo .field .q { flex: 1; color: var(--ink); white-space: nowrap; overflow: hidden; }
.demo .field .q:empty::before { content: attr(data-ph); color: var(--ink-3); }
.demo .field .q.typing::after { content: ""; display: inline-block; width: 1px; height: 14px; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: dblink 1s steps(1) infinite; }
@keyframes dblink { 50% { opacity: 0; } }
.demo .btn-s { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: 600 12px var(--font-sans); white-space: nowrap; transition: transform .15s, background .2s, color .2s, border-color .2s; }
.demo .btn-s.press, .demo .press { transform: scale(.94); }
.demo .btn-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.demo .btn-glow { background: var(--glow); border-color: var(--glow); color: #1c1712; }
.demo .seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--raised); }
.demo .seg span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px; border-radius: 999px; color: var(--ink-2); font: 500 12px var(--font-sans); white-space: nowrap; transition: background .25s, color .25s; }
.demo .seg span.on { background: var(--ink); color: var(--paper); font-weight: 600; }
.demo .cov { flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--surface); }
.demo .cov .i { width: 46%; height: 46%; }
.demo .t-moss { background: var(--moss); } .demo .t-clay { background: var(--clay); } .demo .t-dusk { background: var(--dusk); } .demo .t-sand { background: var(--sand); color: var(--ink); }

/* 01 Utforsk */
.demo .scroll { flex: 1; overflow: hidden; position: relative; }
.demo .scroll-in { padding: 22px 0 90px; width: 780px; margin: 0 auto; will-change: transform; }
.demo .sec-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font: 600 14px var(--font-sans); }
.demo .sec-h em { font: 400 11px var(--font-mono); font-style: normal; color: var(--ink-3); }
.demo .fy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin-bottom: 30px; }
.demo .fy-r { display: grid; grid-template-columns: 38px 1fr auto auto auto; align-items: center; gap: 12px; height: 54px; border-top: 1px solid var(--line); transition: background .25s; padding: 0 6px; border-radius: 8px; }
.demo .fy-r.hov { background: var(--raised); }
.demo .fy-r b { display: block; font-weight: 600; font-size: 13px; }
.demo .fy-r small { font: 400 11px var(--font-mono); color: var(--ink-3); }
.demo .fy-r .meta { font: 400 11px/1.3 var(--font-mono); color: var(--ink-3); text-align: right; }
.demo .fy-r .act { color: var(--ink-2); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; transition: background .25s, color .25s; }
.demo .fy-r .act .i { grid-area: 1 / 1; transition: opacity .2s, transform .3s var(--ease); }
.demo .fy-r .act .i-on { opacity: 0; transform: scale(.5); }
.demo .fy-r.added .act { background: var(--ink); color: var(--paper); }
.demo .fy-r.added .act .i-off { opacity: 0; transform: scale(.5); }
.demo .fy-r.added .act .i-on { opacity: 1; transform: none; }
.demo .pop { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; grid-auto-rows: auto; gap: 14px; }
.demo .pc { position: relative; transition: transform .35s var(--ease); }
.demo .pc .cov { width: 100%; aspect-ratio: 1; border-radius: 12px; position: relative; box-shadow: 0 1px 0 rgba(0,0,0,.04); transition: box-shadow .35s var(--ease); }
.demo .pc .cov img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.demo .cov-img { display: block; object-fit: cover; flex: none; }
.demo .pc b { display: block; margin-top: 8px; font-weight: 600; font-size: 12.5px; }
.demo .pc small { font: 400 11px var(--font-mono); color: var(--ink-3); }
.demo .pc .bpm { position: absolute; left: 8px; bottom: 8px; background: rgba(251,249,245,.92); color: var(--ink); font: 500 10px var(--font-mono); padding: 3px 6px; border-radius: 5px; }
.demo .pc .pl { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; background: var(--glow); color: #1c1712; display: grid; place-items: center; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .25s, transform .35s var(--ease); }
.demo .pc .pl .i { width: 14px; height: 14px; }
.demo .pc.hov { transform: translateY(-4px); }
.demo .pc.hov .cov { box-shadow: 0 18px 30px -18px rgba(40,28,14,.55); }
.demo .pc.hov .pl, .demo .pc.playing .pl { opacity: 1; transform: none; }
.demo .pc.big { grid-row: span 2; }
.demo .pc.big .cov { aspect-ratio: auto; height: 100%; min-height: 330px; display: flex; flex-direction: column; align-items: flex-start; }
.demo .pc.big .big-c { background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 14px; justify-content: flex-start; gap: 2px; }
.demo .pc.big .big-c img { position: static; width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; margin-bottom: 14px; }
.demo .pc.big .cov .lbl { color: var(--ink-3); }
.demo .pc.big .cov strong { font: 600 20px/1.1 var(--font-sans); margin: 4px 0 6px; }
.demo .pc.big .cov span { font: 400 11px var(--font-mono); color: var(--ink-3); }
.demo .player { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; display: grid; grid-template-columns: 230px 1fr 190px; align-items: center; padding: 0 16px; border-top: 1px solid var(--line); background: var(--surface); }
.demo .player .now { display: flex; align-items: center; gap: 10px; min-width: 0; }
.demo .player .now b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.demo .player .now small { font: 400 10.5px var(--font-mono); color: var(--ink-3); }
.demo .player .ctl { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--ink); }
.demo .player .pp { width: 30px; height: 30px; border-radius: 8px; background: var(--glow); display: grid; place-items: center; color: #1c1712; }
.demo .player .pp .i { width: 14px; height: 14px; }
.demo .player .bar { width: 260px; height: 3px; border-radius: 2px; background: var(--raised); position: relative; }
.demo .player .bar i { position: absolute; inset: 0 auto 0 0; width: var(--pp, 10%); background: var(--glow); border-radius: 2px; }
.demo .player .tm { font: 400 10.5px var(--font-mono); color: var(--ink-3); }
.demo .player .rt { display: flex; justify-content: flex-end; align-items: center; gap: 12px; font: 400 10.5px var(--font-mono); color: var(--ink-3); }

/* 02 Bygg økt */
.demo .ed { flex: 1; display: grid; grid-template-columns: 1fr 300px; min-height: 0; }
.demo .ed-main { padding: 16px 20px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.demo .ses { display: flex; align-items: flex-end; gap: 16px; }
.demo .ses h5 { margin: 0; font: 600 18px/1.1 var(--font-sans); }
.demo .ses small { font: 400 11px var(--font-mono); color: var(--ink-3); }
.demo .strip { flex: 1; display: flex; gap: 3px; }
.demo .strip > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.demo .strip i { height: 3px; border-radius: 2px; background: var(--raised); position: relative; overflow: hidden; }
.demo .strip i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--f, 0%); background: var(--ink-3); transition: width .5s var(--ease); }
.demo .strip span { font: 500 11px var(--font-sans); color: var(--ink-3); white-space: nowrap; }
.demo .ph { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: border-color .25s, box-shadow .25s, background .25s; }
.demo .ph.drop { border-color: var(--glow); box-shadow: 0 0 0 3px rgba(243,154,61,.18); }
.demo .ph-h { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; }
.demo .ph-h .bar { width: 3px; height: 16px; border-radius: 2px; background: var(--glow); }
.demo .ph-h b { font-size: 13px; font-weight: 600; }
.demo .ph-h small { font: 400 11px var(--font-sans); color: var(--ink-3); }
.demo .ph-h .sp { flex: 1; }
.demo .meter { display: grid; gap: 4px; justify-items: center; width: 120px; }
.demo .meter span { font: 500 10.5px var(--font-mono); color: var(--ink-3); }
.demo .meter span b { color: var(--glow-text); font-weight: 500; }
.demo .meter i { width: 100%; height: 3px; border-radius: 2px; background: var(--raised); position: relative; overflow: hidden; }
.demo .meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--m, 0%); background: var(--glow); transition: width .45s var(--ease); }
.demo .rows { position: relative; }
.demo .tr { display: grid; grid-template-columns: 26px 1fr 40px 36px 52px 40px; gap: 8px; align-items: center; height: 30px; padding: 0 12px; border-top: 1px solid var(--line); font-size: 12px; overflow: hidden; transition: background .6s; }
.demo .tr .n { font: 400 10.5px var(--font-mono); color: var(--ink-3); }
.demo .tr .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.demo .tr .t small { font-weight: 400; color: var(--ink-3); margin-left: 7px; }
.demo .tr .v { font: 600 11.5px var(--font-mono); text-align: right; }
.demo .tr .en { display: flex; gap: 2px; } .demo .tr .en i { width: 7px; height: 7px; border-radius: 2px; background: var(--raised); } .demo .tr .en i.o { background: var(--glow); }
.demo .tr.new { background: var(--glow-wash); }
.demo .tr.hide { height: 0; border-top-color: transparent; opacity: 0; }
.demo .tr { transition: height .4s var(--ease), opacity .35s, background .8s; }
.demo .empty { height: 34px; display: grid; place-items: center; border-top: 1px dashed var(--line-strong); color: var(--ink-3); font-size: 11.5px; }
.demo .sr { border-left: 1px solid var(--line); background: var(--paper); padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.demo .sr-top { display: flex; align-items: center; gap: 8px; }
.demo .sr .lbl { display: flex; justify-content: space-between; }
.demo .sl { display: flex; flex-direction: column; }
.demo .sl-r { display: grid; grid-template-columns: 22px 1fr 30px; gap: 8px; align-items: center; height: 40px; border-top: 1px solid var(--line); padding: 0 6px; border-radius: 6px; transition: background .25s, opacity .3s, height .35s var(--ease); overflow: hidden; }
.demo .sl-r .n { font: 400 10px var(--font-mono); color: var(--ink-3); }
.demo .sl-r b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo .sl-r small { display: block; font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo .sl-r .v { font: 600 11.5px var(--font-mono); text-align: right; }
.demo .sl-r.hov { background: var(--raised); }
.demo .sl-r.out { height: 0; opacity: 0; border-top-color: transparent; }
.demo .sl-r.lift { opacity: .35; }
.demo .ghost { position: absolute; z-index: 5; left: 0; top: 0; width: 250px; display: grid; grid-template-columns: 1fr 34px; align-items: center; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 18px 34px -16px rgba(40,28,14,.5); transform: rotate(-2deg); opacity: 0; pointer-events: none; transition: opacity .2s; }
.demo .ghost.on { opacity: 1; }
.demo .ghost b { font-size: 12px; } .demo .ghost small { display: block; font-size: 10.5px; color: var(--ink-3); } .demo .ghost .v { font: 600 11.5px var(--font-mono); text-align: right; }

/* 03 Miksing */
.demo .mx { flex: 1; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.demo .mx-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.demo .mx-h { display: flex; align-items: center; gap: 12px; padding: 12px 14px 8px; }
.demo .mx-h h5 { margin: 0; font: 600 15px var(--font-sans); }
.demo .mx-h small { display: block; font: 400 11px var(--font-mono); color: var(--ink-3); }
.demo .mx-h .tm { font: 600 13px var(--font-mono); }
.demo .mx-tools { display: flex; align-items: center; gap: 12px; padding: 0 14px 10px; }
.demo .tog { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); }
.demo .tog i { width: 26px; height: 15px; border-radius: 999px; background: var(--ink); position: relative; }
.demo .tog i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); }
.demo .ruler { position: relative; height: 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 400 9.5px var(--font-mono); color: var(--ink-3); }
.demo .ruler span { position: absolute; top: 5px; }
.demo .lanes { position: relative; height: 330px; }
.demo .lane-lbl { position: absolute; left: 14px; top: 8px; display: flex; gap: 8px; align-items: center; font: 600 11.5px var(--font-sans); }
.demo .lane-lbl::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--glow); }
.demo .lane-lbl small { font: 400 10px var(--font-mono); color: var(--ink-3); }
.demo .clip { position: absolute; height: 124px; border-radius: 6px; overflow: hidden; background: rgba(236,231,222,.7); }
.demo .clip svg { position: absolute; left: 0; top: 22px; height: 96px; }
.demo .clip .nm { position: absolute; left: 8px; top: 3px; font: 500 10px var(--font-sans); color: var(--ink-2); white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.demo .clip-a svg { fill: var(--glow); } .demo .clip-b svg { fill: #6f6a63; }
.demo .clip-b { transition: box-shadow .25s; }
.demo .clip.sel { box-shadow: inset 0 0 0 2px var(--ink); }
.demo .edge { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--danger, #a8443a); opacity: 0; transition: opacity .2s; }
.demo .edge.on { opacity: 1; }
.demo .cut-off { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(30,27,22,.07) 0 4px, transparent 4px 8px); }
.demo .xf { position: absolute; pointer-events: none; background: rgba(243,154,61,.12); border-left: 1px dashed var(--glow-text); border-right: 1px dashed var(--glow-text); transition: opacity .2s; }
.demo .xf svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.demo .xf path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.demo .xf .fo { stroke: var(--glow); } .demo .xf .fi { stroke: #6f6a63; }
.demo .xf .h { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); transform: translate(-50%, -50%); }
.demo .xf .h1 { left: 0; top: 6%; } .demo .xf .h2 { left: 100%; top: 94%; }
.demo .xf-l { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font: 600 10px var(--font-sans); color: var(--glow-text); white-space: nowrap; }
.demo .badge { position: absolute; top: 34px; transform: translateX(-50%); background: var(--ink); color: var(--paper); font: 500 10px var(--font-mono); padding: 3px 7px; border-radius: 999px; white-space: nowrap; }
.demo .playhead { position: absolute; top: -22px; bottom: 0; width: 1px; background: var(--ink); }
.demo .playhead span { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); background: var(--glow-wash); color: var(--glow-text); border: 1px solid var(--glow); font: 500 9.5px var(--font-mono); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.demo .insp { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px; }
.demo .insp .og { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.demo .insp .og b { color: var(--ink); }
.demo .insp .pair { color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.demo .insp .sp { flex: 1; }
.demo .insp .tabs { display: flex; gap: 16px; color: var(--ink-3); }
.demo .insp .tabs b { color: var(--ink); margin-left: 4px; }
.demo .insp .tabs span:first-child { border-bottom: 2px solid var(--glow); padding-bottom: 4px; color: var(--ink); }
.demo .insp2 { display: flex; gap: 28px; padding: 4px 14px 14px; align-items: flex-end; }
.demo .stepper { display: flex; align-items: center; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.demo .stepper span { width: 30px; display: grid; place-items: center; color: var(--ink-2); }
.demo .stepper b { width: 130px; text-align: center; font: 500 12px var(--font-mono); border-left: 1px solid var(--line); border-right: 1px solid var(--line); line-height: 28px; }
.demo .quick { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--raised); }
.demo .quick span { padding: 4px 9px; border-radius: 6px; font: 500 11px var(--font-mono); color: var(--ink-2); transition: background .25s, color .25s; }
.demo .quick span.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(40,28,14,.15); }

/* Toast i appen */
.demo .app-toast { position: absolute; left: 50%; bottom: 74px; z-index: 4; display: flex; align-items: center; gap: 8px; transform: translate(-50%, 12px); background: var(--ink); color: #f1ece4; font: 500 12.5px var(--font-sans); padding: 10px 16px 10px 12px; border-radius: 999px; opacity: 0; white-space: nowrap; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.demo .app-toast .i { color: var(--glow); }
.demo .app-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Live (steg 4) i Mac-rammen */
.demo .live-view { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); background: #121314; container-type: inline-size; }
.demo .live-view.on { opacity: 1; }
.demo .live-view img { width: 100%; height: 100%; object-fit: cover; }

/* Markør */
.demo .dcur { position: absolute; left: 50%; top: 50%; width: 2%; min-width: 14px; z-index: 6; pointer-events: none; transform: translate(-21%, -10%); opacity: 0; transition: opacity .3s; }
.demo .dcur.on { opacity: 1; }
.demo .dcur svg { width: 100%; display: block; fill: #1e1b16; stroke: #fbf9f5; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); transition: transform .12s; transform-origin: 21% 10%; }
.demo .dcur.down svg { transform: scale(.86); }
.demo .dcur .rp { position: absolute; left: 22%; top: 10%; width: 240%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--glow); transform: translate(-50%, -50%) scale(var(--rs, 0)); opacity: var(--ro, 0); }