/* Physical surfaces, layered above the original responsive layout. */
:root{--wear:url('./assets/surface-wear.png');--lcd-paper:#b7c5a0;--lcd-ink:#344b49;--lcd-font:'Courier New',monospace}
body{background-color:#353330;background-image:radial-gradient(ellipse at 35% 8%,#81786a88,transparent 65%),repeating-linear-gradient(2deg,#ffffff03 0 1px,transparent 1px 5px);padding-top:42px;padding-bottom:27px}
.toy{border:12px solid #c33323;border-top-color:#e55439;border-left-color:#dd4930;border-bottom-color:#8c291f;border-right-color:#a3291d;border-radius:43px 43px 51px 51px;padding:24px;background-image:var(--wear),radial-gradient(ellipse at 22% 0%,#ffe88355,transparent 60%),linear-gradient(135deg,#f3c84b,#edb928 58%,#dca627);background-size:590px 540px,100% 100%,100% 100%;background-position:17px 35px,0 0,0 0;box-shadow:inset 0 3px 2px #fff3ae,inset 3px 0 5px #fff1a366,inset -4px -7px 5px #8e611777,0 2px 0 #ed9c73,0 8px 0 #6f231b,0 13px 0 #2d211a,9px 21px 18px #0006,16px 36px 48px #0008;isolation:isolate}
.brand-panel{position:relative;border:1px solid #9c813f;border-top-color:#fff0b4;border-bottom-color:#987c3b;border-radius:16px;padding-top:3px;padding-bottom:7px;background-image:var(--wear),linear-gradient(115deg,#f4e6b8,#f9edc7 53%,#e6d49e);background-size:430px 350px,100% 100%;background-position:81px 24px,0 0;box-shadow:0 2px 1px #6f511777,0 0 0 4px #b18325,0 0 0 6px #ffdc66,inset 1px 2px 2px #fff7d5,inset -2px -2px 3px #b3a074;transform:rotate(-.25deg)}
.mascot{filter:none;mix-blend-mode:multiply;border-radius:16px;transform:rotate(-2deg) scale(1.04)}
h1{color:#b83024;text-shadow:1px 2px 0 #4f251b,2px 4px 0 #cf9b39;-webkit-text-stroke:1px #54291c}.wordmark p{color:#514732}.the{color:#653b85}.meal-stamp{filter:drop-shadow(1px 2px 1px #54321488);background-image:var(--wear),linear-gradient(135deg,#80529a,#5c3578);background-size:260px,100% 100%;background-position:40px 80px,0 0}
.source-strip{margin-top:24px;margin-bottom:22px;padding:11px 12px 11px 17px;border:2px solid #b68a27;border-top-color:#8f6b22;border-left-color:#a87d25;border-bottom-color:#fff1a4;border-right-color:#f9d76b;border-radius:13px;background-image:var(--wear),linear-gradient(180deg,#d8c38d,#ede0b9 28%,#e3d0a0);background-size:540px,100% 100%;background-position:190px 87px,0 0;box-shadow:inset 0 3px 5px #45331299,inset 2px 0 3px #785c2677,0 1px 0 #fff5b7}
.source-icon{color:#715074;text-shadow:0 1px 0 #fff6d6}.source-name strong{color:#443d30}.source-name .eyebrow{color:#62513a;text-shadow:0 1px #fff8d499}
.button,.small-button,.lock-button,.compare button{background-image:var(--wear),linear-gradient(135deg,#fff8db77,transparent 32%,#0002);background-size:175px 180px,100% 100%;background-position:32px 90px,0 0;border-color:#796449;box-shadow:inset 1px 2px 2px #ffffffaa,inset -2px -2px 3px #0003,0 3px 0 #6b5436,1px 5px 4px #0005;text-shadow:0 1px 0 #fff4}
.red{background-image:var(--wear),linear-gradient(155deg,#eb6750,#c43529 48%,#a32b23);border-color:#76291f;color:#fff0d0;box-shadow:inset 2px 2px 2px #ffb092,inset -2px -3px 4px #741d1c,0 4px 0 #68251d,1px 6px 5px #0007;text-shadow:0 -1px #72271c}
.editor{padding:15px 18px 0;border:2px solid #9f802c;border-top-color:#fff0a0;border-left-color:#ffe18a;border-radius:17px;background-image:var(--wear),linear-gradient(128deg,#d7c080,#c5a759 67%,#e0c27c);background-size:370px 460px,100% 100%;background-position:123px 230px,0 0;box-shadow:inset 1px 2px 2px #ffe7a2,0 3px 0 #876722,0 5px 5px #6c481755}
.editor-toolbar{margin-bottom:18px}.editor h2{font-size:23px;color:#4a3c28;text-shadow:0 1px 0 #fff1b7}.editor h2 span{color:#685538}.compare{background:#685c43;border-color:#9d885a;box-shadow:inset 0 2px 3px #322b1f,0 1px 0 #fae3a1;padding:4px;gap:6px}.compare button{border:1px solid #6f6147;background-color:#d9caa2;border-radius:5px;padding:6px 13px;color:#423b30}.compare button.active{background-image:var(--wear),linear-gradient(#8c659c,#66447e);color:#fff0cf;box-shadow:inset 1px 2px 2px #ba98c7,inset -1px -2px 2px #49315e,0 2px 0 #392b40;text-shadow:0 -1px #392b40}.tempo-label{color:#56472f}.tempo-label input{font-family:var(--lcd-font);font-weight:bold;background:#bdc5a2;border:2px solid #6a6249;box-shadow:inset 2px 2px 2px #333a2d66,0 1px 0 #f3dfab;border-radius:3px;color:#344b49}
.screen-bezel{position:relative;border-radius:17px 17px 37px 17px;padding:13px 22px 13px;border:2px solid #23282b;border-top-color:#768083;border-left-color:#626b6c;border-bottom-color:#151a1e;border-right-color:#1a2023;background-image:var(--wear),linear-gradient(145deg,#4c5456 0%,#353d42 44%,#2e3439 88%,#42494c);background-size:450px 360px,100% 100%;background-position:41px 93px,0 0;box-shadow:0 0 0 3px #846d3f,0 0 0 5px #e1c989,inset 2px 2px 3px #a2abad66,inset -3px -4px 5px #111719,1px 5px 7px #30271988}
.screen-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 2px 11px;font:700 12px/1.3 var(--body);letter-spacing:1.6px;color:#c1c6bd;text-shadow:0 -1px #141a1d}.screen-led-label{display:flex;align-items:center;gap:8px;letter-spacing:1px}.screen-led{display:inline-block;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#b17b60,#723d2c 45%,#281b16 85%);box-shadow:0 0 0 2px #22282a,0 1px 0 2px #707a7a}.toy.is-playing .screen-led{background:radial-gradient(circle at 35% 25%,#ffe6aa,#f39338 42%,#a63b1e 90%);box-shadow:0 0 0 2px #22282a,0 0 7px #ff974777}
.roll{height:256px;background:var(--lcd-paper);border:0;border-radius:2px;box-shadow:0 0 0 3px #1a2225,0 0 0 5px #58605f,inset 4px 5px 7px #18272d88}
.roll:before,.roll:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4}.roll:before{background:repeating-linear-gradient(90deg,#152e3925 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,#152e3919 0 1px,transparent 1px 4px);opacity:.4;box-shadow:inset 3px 4px 5px #22332c7a,inset -1px -2px 3px #d3e0b766}.roll:after{background-image:linear-gradient(125deg,#f1f5d926,transparent 28%,transparent 68%,#e6f0da0c 68.2%,transparent 81%);box-shadow:inset 0 0 13px #1c332e30}
.roll svg{shape-rendering:crispEdges}.roll text{font-family:var(--lcd-font);font-weight:bold;letter-spacing:0}.roll .note rect.note-body{stroke-width:1;filter:drop-shadow(1px 1px 0 #344b4938)}.roll .note.is-playing rect.note-body{fill:#d5b64f;stroke:#3c5149;stroke-width:2;filter:drop-shadow(1px 1px 0 #344b4955)}.roll .note:hover rect.note-body{filter:brightness(1.12)}.playhead{background:#4c705e;box-shadow:1px 0 #cad3a5}.playhead:before{background:#496859;clip-path:none;width:6px;height:5px;left:-2px}.screen-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 2px 1px;color:#b6beb7;text-shadow:0 -1px #1d2328}.screen-wordmark{font:bold italic 15px/1 Arial,sans-serif;letter-spacing:-.4px}.color-word{font:bold italic 18px/1 var(--body);margin-left:3px;letter-spacing:-1px}.color-word b:nth-child(1){color:#b9726d}.color-word b:nth-child(2){color:#887ab1}.color-word b:nth-child(3){color:#87a379}.color-word b:nth-child(4){color:#c5ac62}.color-word b:nth-child(5){color:#719ba5}.screen-spec{font:700 12px/1 var(--body);letter-spacing:1px;color:#b3bcb5}.roll-footer{padding-top:13px;color:#554731}.locks-row{border-top:1px solid #a78b50;box-shadow:0 -1px #ead7a344;padding:12px 0 14px}.lock-button{background-color:#d8c79c;border-radius:6px}.lock-button[aria-pressed=true]{background-image:var(--wear),linear-gradient(#46473e,#292d28);border-color:#31392f;box-shadow:inset 1px 2px 3px #161f18,0 1px #eddaaa;color:#e6d49c}.key-controls select{background:#d8c99f;border-color:#756448;box-shadow:inset 0 1px 2px #fff1ba,0 2px 1px #796342;color:#413c2e}
.control-grid{gap:18px;margin-top:24px;margin-bottom:26px}.control-module{position:relative;padding:15px 13px 15px;border-width:2px;border-radius:16px;background-image:var(--wear),linear-gradient(145deg,#ffe491,#eac14c 38%,#cba037);background-size:255px 270px,100% 100%;background-position:39px 83px,0 0;border-top-color:#fff4be;border-left-color:#f8d985;border-right-color:#a47724;border-bottom-color:#936b24;box-shadow:inset 1px 1px 2px #fff1ae,inset -2px -2px 3px #94661f66,0 4px 0 #806027,0 5px 0 2px #b08732,2px 8px 6px #55361577;color:#443824;text-shadow:0 1px #fff1af66}.control-module:nth-child(3){background-position:109px 11px,0 0}.control-module.purple{background-image:var(--wear),linear-gradient(140deg,#9870b0,#79548e 40%,#634277);background-position:190px 143px,0 0;border-top-color:#c2a1d3;border-left-color:#a784bd;border-bottom-color:#3e294b;border-right-color:#4a3157;color:#f1e5c5;box-shadow:inset 1px 1px 2px #cfb3da77,inset -2px -2px 3px #40294d,0 4px 0 #382840,0 5px 0 2px #a48237,2px 8px 6px #55361577;text-shadow:0 -1px #493453}.control-module:nth-child(4){background-position:13px 161px,0 0}.control-heading{margin-bottom:15px}.control-heading h3{font-size:22px}.control-heading h3 span{display:none}.control-heading output{font:700 12px var(--lcd-font);padding:3px 5px;background:#2b282227;border-radius:3px;box-shadow:inset 0 1px 2px #31221955,0 1px #ffffff29}.slider-ends{margin-top:14px;min-height:15px}
input[type=range]{height:14px;border:2px solid #9e823f;border-top-color:#6e572c;border-left-color:#75613c;border-bottom-color:#f4d683;background:linear-gradient(#15171a,#3b3b34 80%,#242723);border-radius:5px;box-shadow:inset 0 3px 3px #000,0 1px 0 #ffecb566}.purple input[type=range]{border-color:#4d365c;border-bottom-color:#ba92ce;box-shadow:inset 0 3px 3px #000,0 1px 0 #b78fc266}
input[type=range]::-webkit-slider-thumb{width:26px;height:36px;border-radius:6px;border:1px solid #672821;background-image:var(--wear),repeating-linear-gradient(0deg,transparent 0 5px,#722a2560 5px 6px,#ffb89b80 6px 7px),linear-gradient(90deg,#b42e26,#df6950 24%,#ce4936 60%,#972c25);background-size:140px,100% 100%,100% 100%;box-shadow:inset 1px 2px 1px #ffaf8a,inset -1px -2px 2px #712821,0 3px 0 #502821,2px 6px 4px #0008}
input[type=range]::-moz-range-thumb{width:24px;height:34px;border-radius:6px;border:1px solid #672821;background-image:var(--wear),repeating-linear-gradient(0deg,transparent 0 5px,#722a2560 5px 6px,#ffb89b80 6px 7px),linear-gradient(90deg,#b42e26,#df6950 24%,#ce4936 60%,#972c25);background-size:140px,100% 100%,100% 100%;box-shadow:inset 1px 2px 1px #ffaf8a,inset -1px -2px 2px #712821,0 3px 0 #502821,2px 6px 4px #0008}
.dice-button{background-image:var(--wear),linear-gradient(135deg,#fff9df,#e1d3ae);background-size:160px,100% 100%;background-position:45px 82px,0 0;border:1px solid #76684f;border-top-color:#fff9df;border-left-color:#fff2cd;border-radius:9px;box-shadow:inset 1px 1px 1px #fffdf0,inset -2px -3px 3px #9d8d6b,0 4px 0 #5e5240,0 4px 0 3px #292923,2px 7px 5px #0007;color:#34352c}
.toy-footer{gap:22px;padding-top:8px;padding-bottom:17px}.play-button{background-image:var(--wear),radial-gradient(circle at 34% 25%,#ef8c6b,#cc4936 45%,#9d2e27 85%);background-size:160px,100% 100%;border:4px solid #632c25;border-top-color:#f29675;border-left-color:#e98260;border-right-color:#87372b;border-bottom-color:#62281f;box-shadow:inset 0 2px 4px #ffc39c,inset -4px -4px 6px #712920,0 4px 0 #6c352b,0 5px 0 5px #d0b36b,0 6px 0 8px #736139,3px 10px 8px #46301a99}.play-button[aria-pressed=true]{background-image:var(--wear),radial-gradient(circle at 35% 25%,#a484b7,#725184 65%,#543561);box-shadow:inset 0 2px 3px #d3b3da,inset -3px -3px 4px #40294d,0 2px 0 #453346,0 3px 0 5px #d0b36b,0 4px 0 8px #736139,2px 5px 5px #46301a99}.transport-copy{color:#514128;text-shadow:0 1px #ffdf8266}
.shake-button{background-image:var(--wear),linear-gradient(155deg,#ffe681,#f2c74b 50%,#d5a32b);background-size:360px 170px,100% 100%;background-position:83px 110px,0 0;border:2px solid #9f7825;border-top-color:#fff0a5;border-left-color:#fbe394;border-bottom-color:#815d1e;border-right-color:#9e7021;border-radius:18px;box-shadow:inset 1px 2px 3px #fff4b6,inset -3px -4px 5px #a67d29,0 5px 0 #896526,0 6px 0 4px #a38237,0 7px 0 6px #f0d47b,3px 12px 8px #50371488;color:#403723;text-shadow:0 1px #fff0b099}.shake-button small{color:#5b4b30}.export-button{background-image:var(--wear),linear-gradient(140deg,#e77154,#c8422e 53%,#a82e23);background-size:190px 160px,100% 100%;background-position:120px 40px,0 0;border:2px solid #8b3023;border-top-color:#f8a886;border-left-color:#f28462;border-bottom-color:#6d271f;border-right-color:#963324;box-shadow:inset 1px 2px 2px #ffbf9b,inset -3px -3px 4px #8d2b24,0 5px 0 #6b2a22,0 6px 0 3px #b28d3c,2px 10px 7px #53321d99;color:#fcebc5;text-shadow:0 -1px #8b3024;transform:rotate(-2deg)}
.button:not(:disabled):active,.dice-button:not(:disabled):active,.shake-button:not(:disabled):active,.export-button:not(:disabled):active,.play-button:not(:disabled):active{transform:translateY(3px);box-shadow:inset 1px 1px 3px #fff5,inset -2px -2px 4px #0004,0 1px 0 #59412a,1px 3px 3px #0006}.utility-row{border-top:1px solid #ad852f;box-shadow:0 -1px #ffe49180;margin-top:12px;padding-top:12px;color:#51432d;text-shadow:0 1px #ffeaa077}.utility-row p{color:#56472e}.utility-row p.error{color:#7e211d}.history-actions button{color:#55482e;text-shadow:0 1px #ffe29b}.outside-note{color:#c9c1ae;text-shadow:0 1px #1c1b19}.volume-label input{height:8px}.volume-label input::-webkit-slider-thumb{width:16px;height:23px}.volume-label input::-moz-range-thumb{width:14px;height:21px}
@media(max-width:900px){.toy{padding:20px}.control-grid{gap:14px}.control-module{padding:14px 10px}.control-heading h3{font-size:19px}.toy-footer{gap:18px}.screen-bezel{padding-left:17px;padding-right:17px}.screen-spec{font-size:12px;letter-spacing:.4px}}
@media(max-width:680px){body{padding:17px 10px 22px}.toy{border-width:8px;border-radius:29px 29px 37px 37px;padding:14px;box-shadow:inset 0 2px 2px #fff1a6,inset -3px -4px 4px #99652066,0 5px 0 #70241d,0 9px 0 #29231c,5px 15px 15px #0007,8px 25px 30px #0006}.brand-panel{border-radius:12px;padding-top:4px;padding-bottom:4px}.source-strip{margin-top:20px;margin-bottom:17px;padding:9px 8px}.editor{padding:12px 10px 0;border-radius:13px}.editor-toolbar{margin-bottom:15px}.editor h2{font-size:21px}.compare{gap:7px}.compare button{padding:9px 12px}.screen-bezel{padding:11px 10px 11px;border-radius:12px 12px 24px 12px}.screen-topline{font-size:12px;letter-spacing:.6px;margin-bottom:10px}.screen-led-label{gap:6px}.screen-led{width:6px;height:6px}.roll{height:223px}.screen-bottom{padding-top:13px;gap:4px}.screen-wordmark{font-size:13px}.color-word{font-size:16px}.screen-spec{display:none}.roll-footer{padding-top:11px;line-height:1.4}.locks-row{padding-bottom:13px}.control-grid{gap:17px 13px;margin-top:22px;margin-bottom:23px}.control-module{padding:13px 10px 14px;border-radius:13px}.control-heading h3{font-size:21px}.control-heading{margin-bottom:13px}.slider-ends{flex-wrap:wrap;gap:4px;line-height:1.3;margin-top:13px}.dice-button{width:37px;min-width:37px}.toy-footer{gap:16px 13px;padding:8px 3px 15px}.shake-button{border-width:2px;padding:9px;border-radius:14px;min-height:76px;gap:6px}.shake-button>span+span{font-size:clamp(1rem,4.4vw,1.5rem)}.shake-dice{font-size:32px}.shake-button small{font-size:12px}.export-button{transform:none;margin-top:4px;min-height:52px}.play-button{width:59px;height:59px}.utility-row{margin-top:10px}.source-name strong{max-width:calc(100vw - 222px)}}
@media(max-width:365px){.toy{padding:11px;border-width:7px}.editor{padding-left:8px;padding-right:8px}.control-module{padding:12px 8px}.control-grid{gap:16px 11px}.control-heading h3{font-size:19px}.control-heading output{padding:2px 3px}.screen-topline{letter-spacing:0}.screen-bezel{padding-left:9px;padding-right:9px}.toy-footer{grid-template-columns:60px 1fr;gap:17px 11px}.shake-dice{display:none}.shake-button>span+span{font-size:17px}.source-strip:has(#demoButton:not([hidden])) .source-name strong{max-width:190px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
/* Supplied sculpted wordmark: preserve the art's natural proportions. */
.wordmark-art{padding:0 8px 0 0}.wordmark-art h1{font-size:inherit;line-height:1;letter-spacing:0;transform:none;text-shadow:none;-webkit-text-stroke:0;white-space:normal}.wordmark-image{display:block;width:100%;height:auto;max-height:130px;object-fit:contain;object-position:left center;filter:drop-shadow(1px 3px 1px #65472155)}.wordmark-art p{margin:7px 0 0 8px}
@media(max-width:900px){.wordmark-image{max-height:115px}}
@media(max-width:680px){.wordmark-art{padding-right:0}.wordmark-image{max-height:93px}.wordmark-art p{margin:6px 0 0 3px;font-size:12px}}
.wordmark-art h1{aspect-ratio:3.05;overflow:hidden}.wordmark-art .wordmark-image{height:100%;max-height:none;object-fit:cover;object-position:center 88%}