/* The klomp open-view window, shared by every page built from the design
   canvas: paper, ink, the extruded --pop shadow, the house buttons and knobs. */
:root{--ink:#241a12;--ink2:#6b5545;--paper:#fef2e4;--sand:#f7e4cd;--white:#fffaf3;--orange:#ff6b00;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:"Martian Mono",ui-monospace,Menlo,monospace}
body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:24px 16px;overflow-x:hidden}
button{font:inherit;color:inherit}
.fit{position:relative;max-width:100%}
.frame{width:1008px;height:600px;transform-origin:0 0}
.window{width:1008px;height:600px;padding:20px 20px 10px;display:flex;flex-direction:column;gap:16px;position:relative;background-color:#fef2e4;background-image:radial-gradient(#f7e4cd 1.4px,transparent 1.6px);background-size:16px 16px}
.display{font-family:'Bricolage Grotesque','Trebuchet MS',sans-serif;font-weight:800}
.pop{border:3px solid var(--ink);box-shadow:1px 1px 0 var(--ink),2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink),5px 5px 0 var(--ink),6px 6px 0 var(--ink)}
.pb{transition:transform .1s ease,box-shadow .1s ease;cursor:pointer}
.pb:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.pb:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.pb:focus-visible,.kn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sq{width:34px;height:34px;border:3px solid var(--ink);border-radius:10px;background:var(--white);box-shadow:1px 1px 0 var(--ink),2px 2px 0 var(--ink),3px 3px 0 var(--ink),4px 4px 0 var(--ink);display:flex;align-items:center;justify-content:center}
.kn{background:none;border:0;padding:0;cursor:ns-resize;display:block;touch-action:none}
.kn .kface,.kn .ksh{transition:transform .12s ease;transform-box:fill-box;transform-origin:center}
.kn:hover .kface,.kn:focus-visible .kface{transform:scale(1.06)}
.kn:hover .ksh,.kn:focus-visible .ksh{transform:translate(2px,2px)}
.hero{position:absolute;left:0;top:0;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer;touch-action:none;display:block}
.hero.grab{cursor:grabbing}
.hero:focus-visible{outline:3px solid var(--orange);outline-offset:-7px}
.seg{width:8px;height:14px;border:2px solid var(--ink);border-radius:3px;background:var(--sand)}
.other{display:block;text-align:center;margin-top:18px;font-size:9px;font-weight:600;letter-spacing:1.4px;color:var(--ink2);text-decoration:none}
.other:hover{color:var(--orange)}
@media (prefers-reduced-motion:reduce){.pb,.kn .kface,.kn .ksh{transition:none}}
/* Inside a DAW shell: the window is the whole editor, nothing around it. */
body.native{padding:0;min-height:0;overflow:hidden}
body.native .transport,body.native .other{display:none}
.native-problem{position:fixed;left:0;right:0;top:0;z-index:9;padding:8px 12px;background:#d92b1c;color:#fffaf3;font:600 12px/1.3 "Martian Mono",ui-monospace,Menlo,monospace;letter-spacing:.04em}