/* Share the site's typography and color tokens. All controls stay scoped. */
body.sampler-view { background:var(--bg-color); color:var(--text-color); margin:0; padding:0; min-width:320px; display:block; font-weight:400; }
body.sampler-view > .cutroom-container { max-width:1180px; width:100%; margin:0 auto; padding:56px 40px 28px; }
body.sampler-view #sutterlin-toggle { display:none; }
#sampler { --ink:var(--text-color); --muted:var(--text-muted); --line:var(--border-color); --paper:var(--bg-color); --accent:var(--accent-color); --wash:#f0e7dc; --pad-paper:#f5f0e9; font:400 14px/1.6 var(--font-serif); text-align:left; }
#sampler *,#sampler *::before,#sampler *::after { box-sizing:border-box; }
#sampler [hidden] { display:none!important; }
#sampler button,#sampler input,#sampler select { font:inherit; }
#sampler button { cursor:pointer; color:var(--accent); background:transparent; border:1px solid var(--line); border-radius:0; padding:9px 14px; line-height:1.4; }
#sampler button:hover { background:var(--wash); border-color:var(--accent); }
#sampler button:disabled { cursor:wait; opacity:.5; }
#sampler :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#sampler .cr-primary { background:var(--accent); border-color:var(--accent); color:var(--paper); }
#sampler .cr-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
#sampler input:not([type=range]),#sampler select { width:100%; min-width:0; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:0; padding:9px 10px; }
#sampler input::placeholder { color:var(--muted); opacity:.8; }
#sampler input[type=range] { accent-color:var(--accent); width:100%; cursor:pointer; height:18px; margin:7px 0; }
#sampler a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
#sampler a:hover { color:var(--accent-hover); }
#sampler p { margin:0 0 12px; max-width:none; width:auto; }
#sampler h1 { font:200 46px/1.3 var(--font-serif); letter-spacing:-.02em; margin:18px 0 7px; color:var(--ink); }
#sampler h2 { font:400 28px/1.3 var(--font-serif); letter-spacing:-.02em; margin:22px 0; border:0; padding:0; }
#sampler .cr-header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:28px; margin:0; }
#sampler .cr-back { font:200 14px/1.5 var(--font-serif); }
#sampler .cr-back span { color:var(--muted); }
#sampler .cr-kicker { font:400 10px/1.5 var(--font-serif); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
#sampler .cr-tagline { color:var(--muted); font-size:15px; font-weight:200; font-style:italic; margin:0; }
#sampler .cr-heading-meta { display:grid; justify-items:end; gap:14px; padding-bottom:2px; }
#sampler .cr-text-button { border:0; padding:2px 0; font-size:12px; }
#sampler .cr-text-button:hover { background:transparent; text-decoration:underline; text-underline-offset:4px; }
#sampler .cr-toolbar { position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; margin-bottom:27px; }
#sampler .cr-kit-name { display:flex; flex:1; align-items:center; gap:17px; min-width:0; }
#sampler .cr-kit-name > span { flex-shrink:0; }
#sampler .cr-kit-name input { border:0; background:transparent; font:200 19px/1.5 var(--font-serif); width:100%; max-width:460px; padding:5px 0; text-overflow:ellipsis; }
#sampler .cr-toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; }
#sampler .cr-toolbar-actions button { font-size:12px; }
#sampler .cr-file-menu { position:absolute; right:0; top:66px; z-index:20; padding:8px; background:var(--paper); border:1px solid var(--line); box-shadow:0 8px 25px #2c252010; display:grid; }
#sampler .cr-file-menu button { border:0; text-align:left; }
#sampler .cr-workspace { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; }
#sampler .cr-deck-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; height:36px; }
#sampler .cr-modes { display:flex; gap:14px; }
#sampler .cr-modes button { border:0; border-bottom:1px solid transparent; color:var(--muted); font:400 10px var(--font-serif); padding:9px 1px; }
#sampler .cr-modes span { font:400 13px var(--font-serif); margin-left:7px; }
#sampler .cr-modes button[aria-pressed=true] { border-bottom-color:var(--accent); color:var(--accent); }
#sampler .cr-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
#sampler .cr-pad { position:relative; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:0; overflow:hidden; color:var(--ink); transition:border-color .1s,box-shadow .1s; }
#sampler .cr-pad.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
#sampler .cr-pad.playing { box-shadow:0 0 0 2px var(--accent); border-color:var(--accent); }
#sampler .cr-pad-trigger { display:block; width:100%; padding:0; color:inherit; background:transparent; border:0; border-radius:0; text-align:left; touch-action:none; user-select:none; -webkit-user-select:none; }
#sampler .cr-pad-trigger:hover { background:transparent; border:0; }
#sampler .cr-pad-visual { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:var(--pad-paper); display:grid; place-items:center; }
#sampler .cr-pad-visual img,#sampler .cr-pad-visual video { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; }
#sampler .cr-pad-visual img { opacity:.85; transition:opacity .15s; }
#sampler .cr-pad-trigger:hover img { opacity:1; }
#sampler .cr-pad-trigger:hover .cr-pad-visual { background:var(--wash); }
#sampler .cr-pad-visual .cr-empty-number { font:200 38px var(--font-serif); color:var(--accent); opacity:.35; letter-spacing:-.02em; }
#sampler .cr-pad-top { position:absolute; inset:8px 8px auto; display:flex; justify-content:space-between; pointer-events:none; }
#sampler .cr-pad-key { background:var(--paper); border:1px solid var(--line); padding:1px 5px; color:var(--accent); font:400 10px/1.6 var(--font-serif); min-width:21px; text-align:center; }
#sampler .cr-pad-lamp { width:6px; height:6px; margin:7px 2px; border-radius:50%; background:#c7b8a6; box-shadow:0 0 0 2px var(--paper); }
#sampler .cr-pad.ready .cr-pad-lamp { background:var(--accent); }
#sampler .cr-pad.playing .cr-pad-lamp { background:var(--accent-hover); }
#sampler .cr-pad-bottom { padding:9px 10px; background:var(--paper); border-top:1px solid var(--line); min-height:52px; display:flex; gap:4px; align-items:center; }
#sampler .cr-pad-label { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:400; }
#sampler .cr-pad-info { display:block; font:400 9px/1.7 var(--font-serif); letter-spacing:.02em; color:var(--muted); }
#sampler .cr-pad-edit { position:absolute; bottom:12px; right:7px; border:0; background:var(--paper); color:var(--accent); padding:4px 6px; font-size:11px; }
#sampler .cr-pad-bottom > div { min-width:0; padding-right:23px; }
#sampler .cr-pad-progress { position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); }
#sampler .cr-under-grid { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; font-size:11px; color:var(--muted); }
#sampler kbd { font:400 10px/1.5 var(--font-serif); border:1px solid var(--line); padding:2px 4px; border-radius:0; color:var(--muted); }
#sampler .cr-key-hint { margin-left:5px; }
#sampler .cr-output { display:flex; align-items:center; flex-wrap:wrap; gap:20px; padding:19px 0 15px; border-bottom:1px solid var(--line); }
#sampler .cr-output label { display:flex; align-items:center; gap:12px; font:400 10px var(--font-serif); letter-spacing:.06em; }
#sampler .cr-output input { width:110px; }
#sampler #cr-audio-state { margin-left:auto; font-size:11px; color:var(--muted); }
#sampler .cr-status { color:var(--muted); padding:12px 0; font-size:12px; min-height:44px; }
#sampler .cr-status.error { color:#9b3d2b; }
#sampler .cr-editor { background:transparent; padding:0 0 0 24px; border:0; border-left:1px solid var(--line); border-radius:0; }
#sampler .cr-editor-heading { display:flex; align-items:center; justify-content:space-between; margin:4px 0 23px; }
#sampler .cr-field { display:block; font-size:11px; color:var(--muted); margin-bottom:12px; }
#sampler .cr-field input,#sampler .cr-field select { display:block; margin-top:5px; font-size:12px; }
#sampler .cr-source-row { display:flex; align-items:stretch; margin-top:5px; }
#sampler .cr-source-row input { margin:0; }
#sampler .cr-source-row button { background:var(--paper); padding:6px 11px; border-left:0; }
#sampler .cr-preview { width:100%; height:180px; background:var(--pad-paper); overflow:hidden; position:relative; border:1px solid var(--line); }
#sampler .cr-preview iframe,#sampler .cr-preview video { width:100%; height:100%; border:0; object-fit:contain; }
#sampler .cr-preview-empty { height:100%; display:flex; flex-direction:column; justify-content:center; padding:23px; color:var(--accent); font:italic 200 23px/1.5 var(--font-serif); }
#sampler .cr-preview-empty span { margin-top:20px; font:400 9px/1.5 var(--font-serif); letter-spacing:.06em; color:var(--muted); }
#sampler .cr-scrub-row { display:flex; align-items:center; gap:12px; margin:8px 0 12px; }
#sampler .cr-scrub-row output { white-space:nowrap; font:400 11px var(--font-serif); font-variant-numeric:tabular-nums; }
#sampler .cr-trim-fields,#sampler .cr-settings-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
#sampler .cr-trim-buttons { display:flex; gap:6px; margin-bottom:14px; }
#sampler .cr-trim-buttons button { padding:7px 6px; font-size:11px; flex:1; }
#sampler #cr-audition { flex:0 0 37px; }
#sampler #cr-wave { width:100%; height:44px; display:block; margin:2px 0 8px; }
#sampler .cr-note { color:var(--muted); font-size:11px; line-height:1.6; margin:7px 0 14px; }
#sampler .cr-effect { margin:14px 0 0; }
#sampler .cr-effect label { display:flex; justify-content:space-between; font-size:12px; }
#sampler .cr-effect output { font:400 11px var(--font-serif); font-variant-numeric:tabular-nums; }
#sampler .cr-editor-bottom { border-top:1px solid var(--line); padding-top:14px; display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
#sampler #cr-pad-state { font:400 9px var(--font-serif); color:var(--accent); }
#sampler .cr-footer { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:20px; margin-top:32px; font-size:11px; color:var(--muted); }
#sampler .cr-footer > :first-child { font:400 10px var(--font-serif); letter-spacing:.05em; }
#sampler .cr-dialog { width:min(550px,calc(100vw - 30px)); max-height:90vh; overflow:auto; margin:auto; padding:26px 30px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:0; box-shadow:0 15px 80px #2c252030; }
#sampler .cr-dialog::backdrop { background:#2c252080; }
#sampler .cr-dialog-top { display:flex; justify-content:space-between; align-items:center; gap:16px; }
#sampler .cr-close { border:0; padding:0 7px; font-size:24px; }
#sampler .cr-steps { padding-left:22px; font-size:14px; }
#sampler .cr-steps li { padding-left:6px; margin-bottom:20px; }
#sampler .cr-steps p { margin:6px 0; color:var(--muted); font-size:13px; }
#sampler .cr-dialog .cr-note { font-size:12px; }
#sampler details { font-size:12px; border-top:1px solid var(--line); margin-top:20px; padding-top:12px; }
#sampler summary { cursor:pointer; margin-bottom:8px; }
#sampler .cr-drop { position:fixed; inset:12px; z-index:100; display:grid; place-items:center; pointer-events:none; background:#faf8f5f5; border:1px dashed var(--accent); font:200 42px var(--font-serif); text-align:center; }
#sampler .cr-drop small { display:block; font:400 14px var(--font-serif); margin-top:20px; }
#sampler .cr-demo-art { position:absolute; inset:0; overflow:hidden; background:var(--demo-bg,var(--pad-paper)); }
#sampler .cr-pad:nth-child(n+5):nth-child(-n+8) { --demo-bg:#eee4d8; }
#sampler .cr-pad:nth-child(n+9):nth-child(-n+12) { --demo-bg:#f2e9df; }
#sampler .cr-pad:nth-child(n+13) { --demo-bg:#e9ddd0; }
#sampler .cr-demo-art::before { content:''; position:absolute; width:min(60%,64px); aspect-ratio:1; border:1px solid #7c583560; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); }
#sampler .cr-demo-art::after { content:''; position:absolute; width:min(42%,44px); height:1px; background:var(--accent); top:50%; left:50%; transform:translateX(-50%) rotate(var(--demo-angle,25deg)); }
#sampler .cr-pad.playing .cr-demo-art::before { animation:cr-ring .35s ease-out; }
#sampler .cr-pad.playing .cr-demo-art { background:var(--wash); }
@keyframes cr-ring { from { transform:translate(-50%,-50%) scale(.4); opacity:1; } to { transform:translate(-50%,-50%) scale(1.1); opacity:.6; } }
#sampler[data-mode=perform] .cr-editor { display:none; }
#sampler[data-mode=perform] .cr-workspace { grid-template-columns:1fr; }
#sampler[data-mode=perform] h1 { font-size:36px; margin:12px 0 6px; }
#sampler[data-mode=perform] .cr-header { padding-bottom:18px; }
#sampler[data-mode=perform] .cr-toolbar { padding:12px 0; margin-bottom:15px; }
#sampler[data-mode=perform] .cr-pad-visual { aspect-ratio:auto; height:clamp(58px,calc((100dvh - 460px)/4 - 54px),160px); }
#sampler[data-mode=perform] .cr-pad-visual video { object-fit:contain; background:var(--ink); }
#sampler[data-mode=perform] .cr-footer { margin-top:14px; }
#sampler[data-mode=perform] .cr-pad-trigger { cursor:pointer; }
@media(max-width:1100px) {
  body.sampler-view > .cutroom-container { padding:32px 25px 24px; }
  #sampler .cr-workspace { grid-template-columns:minmax(0,1fr) 280px; gap:24px; }
  #sampler .cr-editor { padding-left:20px; }
  #sampler .cr-grid { gap:8px; }
  #sampler .cr-pad-label { font-size:11px; }
  #sampler .cr-key-hint { display:none; }
  #sampler .cr-heading-meta .cr-kicker { display:none; }
}
@media(max-width:780px) {
  body.sampler-view > .cutroom-container { padding:24px 16px; }
  #sampler h1 { font-size:36px; margin-top:16px; }
  #sampler .cr-header { padding-bottom:22px; gap:12px; }
  #sampler .cr-tagline { font-size:12px; }
  #sampler .cr-back { font-size:12px; }
  #sampler .cr-heading-meta { flex-shrink:0; }
  #sampler .cr-heading-meta .cr-text-button { font-size:11px; }
  #sampler .cr-workspace { grid-template-columns:1fr; }
  #sampler .cr-toolbar { align-items:flex-start; flex-direction:column; gap:12px; padding:12px 0; }
  #sampler .cr-kit-name { width:100%; }
  #sampler .cr-kit-name input { width:100%; }
  #sampler .cr-toolbar-actions { width:100%; gap:6px; }
  #sampler .cr-toolbar-actions button { flex:1; font-size:11px; padding:9px 6px; }
  #sampler #cr-more { flex:0; }
  #sampler .cr-file-menu { top:110px; }
  #sampler .cr-editor { border-left:0; border-top:1px solid var(--line); padding:22px 0 0; }
  #sampler .cr-preview { height:240px; }
  #sampler .cr-pad-visual { aspect-ratio:1; }
  #sampler .cr-pad-top { inset:5px 5px auto; }
  #sampler .cr-pad-bottom { min-height:47px; padding:6px; }
  #sampler .cr-pad-bottom > div { padding-right:0; }
  #sampler .cr-pad-edit { right:2px; bottom:auto; top:30px; font-size:10px; padding:2px 4px; }
  #sampler .cr-pad-info { font-size:8px; }
  #sampler .cr-empty-number { font-size:29px!important; }
  #sampler .cr-output { gap:15px; }
  #sampler #cr-audio-state { margin-left:0; width:100%; }
  #sampler .cr-footer { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { #sampler *,#sampler *::before { animation:none!important; transition:none!important; } }