.fun { width:100%; max-width:100%; --muted:#a59d91; --paper:#ffffff; }
.fun h1 { display:inline-block; margin:0; font-size:1.7rem; transform:rotate(-3deg); padding:0 5px 2px 0; }
.fun button,.fun select,.fun input { font:inherit; }
.fun button { background:none; border:0; border-radius:0; color:#c6bfb2; padding:7px 9px; margin:0; min-height:40px; box-shadow:none; letter-spacing:0; line-height:1.4; }
.fun button:hover { background:#ddd0b514; color:#fff5dc; }
.fun button:disabled { opacity:.35; cursor:default; }
.fun button[aria-pressed="true"] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; color:#f0e5cc; }
.fun :focus-visible { outline:2px dashed #caaa79; outline-offset:4px; }
.drawing-tools,.tool-group { display:flex; align-items:center; flex-wrap:wrap; }
.drawing-tools { justify-content:space-between; gap:8px 16px; margin:24px 0 10px; font-size:.78rem; }
.tool-group { gap:2px; }
.tool-separator { color:#625e55; margin:0 6px; }
.pencil-label { color:#958f7d; padding-right:5px; font-size:.75rem; }
.paper { position:relative; height:460px; background:var(--paper); color:#514838; isolation:isolate; box-shadow:1px 1px 0 #777; }
.paper::after { content:""; position:absolute; inset:0; border:1px solid #999; pointer-events:none; clip-path:polygon(0 0,99.7% .3%,100% 99.5%,.3% 100%); }
#field { width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.paper.erasing #field { cursor:cell; }
.paper #expand { position:absolute; right:5px; top:4px; color:inherit; font-size:1.3rem; z-index:2; width:42px; }
.paper #expand:hover { background:#66583f16; }
.paper-corner { pointer-events:none; position:absolute; right:14px; bottom:9px; font-size:.63rem; opacity:.75; }
.paper.feedback { background:#11130e; color:#cfc6ad; }
.paper:fullscreen { height:100%; width:100%; border:0; box-shadow:none; }
.paper.expanded { position:fixed; inset:0; width:100vw; height:100dvh; z-index:10000; }
.paper-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.75rem; color:#999; margin:6px 0 12px; }
.view-picker { display:flex; gap:6px; }
.view-picker button { min-height:32px; padding:3px 8px; font-size:.75rem; color:#aaa; }
.view-picker button[aria-pressed="true"] { color:#eee; font-weight:bold; text-decoration:none; }
.fun-transport { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:.8rem; margin:0 0 14px; }
.fun-transport button { border:1px solid #555; padding:4px 12px; min-height:36px; background:#181818; color:#ddd; transform:none; font-weight:normal; text-decoration:none; }
.fun-transport button:hover { border-color:#999; background:#222; color:#fff; }
.fun .play-button { min-width:72px; }
.fun .play-button[aria-pressed="true"] { color:#fff; text-decoration:none; }
.fun-transport label { display:flex; align-items:center; gap:8px; color:#bbb; }
.fun input[type="range"] { accent-color:#aaa; height:30px; cursor:pointer; margin:0; max-width:100%; }
#tempo { width:95px; } #bpm { min-width:3ch; color:#bbb; }
#audio-level { display:none; }
.tuning { font-size:.8rem; color:#bbb; }
.fun-settings { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.fun-settings label { display:flex; align-items:center; gap:8px; min-width:0; font-size:.75rem; }
.fun select { color-scheme:dark; background:#111; color:#ddd; border:1px solid #555; border-radius:0; padding:4px 6px; width:auto; min-width:0; max-width:100%; height:34px; }
#volume { width:100px; }
.fun-bottom { margin:12px 0 0; }
.fun-bottom button { padding:4px 0; min-height:32px; font-size:.75rem; color:#8ab4f8; text-decoration:underline; text-underline-offset:3px; }
#live-note { display:none; }
.fun .fun-status { color:#999; font-size:.72rem; margin:4px 0 12px; overflow-wrap:anywhere; }
.fun .fun-status:empty { display:none; }
.fun-more { margin-top:16px; font-size:.75rem; color:#999; }
.fun-more summary { cursor:pointer; width:fit-content; padding:4px 0; }
.fun .fun-credit { margin-top:8px; margin-bottom:6px; font-size:.7rem; color:#999; }
.fun .fun-colophon { margin-top:0; font-size:.7rem; color:#999; }
.fun-credit a { color:#8ab4f8; }
.fun .note-return { margin-top:24px; }
@media (max-width:683px) {
  .drawing-tools { gap:4px; margin-bottom:8px; }
  .tool-group { justify-content:flex-start; }
  .paper { height:420px; }
  .fun-transport { gap:10px; }
  #tempo { width:85px; }
  .fun-settings { gap:8px 16px; }
}

.palette { display:grid; grid-template-columns:repeat(12,30px); gap:6px; margin:0 0 16px; }
.fun .color-button { min-height:30px; width:30px; height:30px; padding:0; border:2px outset #bcbcbc; background:var(--ink); }
.fun .color-button:hover { background:var(--ink); border-color:#fff; }
.fun .color-button[aria-pressed="true"] { outline:2px solid #fff; outline-offset:2px; border-style:inset; }
@media(max-width:683px) { .palette { grid-template-columns:repeat(6,32px); gap:7px; } .fun .color-button { width:32px; height:32px; } }