:root{color-scheme:dark;--bg:#151b21;--ink:#f4ecde;--muted:#bbc1bd;--surface:#253038;--line:#536159;--gold:#d6b477}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:system-ui,sans-serif}button,select,input{font:inherit}button{color:inherit;background:var(--surface);border:1px solid transparent;border-radius:13px;cursor:pointer;min-height:40px}button:disabled{opacity:.34;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}#app{height:100dvh;max-width:680px;margin:auto;padding:calc(6px + env(safe-area-inset-top)) 12px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-rows:54px 40px minmax(0,1fr) 46px;gap:4px}header{display:flex;align-items:center;gap:10px}header h1{font:700 clamp(17px,4.7vw,22px) Georgia,serif;flex:1;margin:0}#aboutButton{width:44px;height:44px;min-height:0;padding:0;overflow:hidden}#aboutButton img{width:100%;height:100%;object-fit:cover}#settingsButton{width:46px;height:44px;font-size:26px}.caption{display:flex;align-items:center;gap:8px;justify-content:space-between}.caption h2{font:700 20px Georgia,serif;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption span{font-size:12px;color:var(--muted);white-space:nowrap}.playfield{position:relative;min-height:0}canvas{width:100%;height:100%;display:block;touch-action:none}#loading{position:absolute;top:30%;width:100%;text-align:center;color:var(--muted);font-size:13px;pointer-events:none}footer{display:flex;gap:8px}footer button{flex:1}dialog{border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);padding:14px 18px;width:min(390px,calc(100vw - 24px));max-height:calc(100dvh - 20px);box-shadow:0 20px 100px #0008}dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}dialog form{display:grid;gap:8px}.dialogTop{display:flex;justify-content:space-between;align-items:center;gap:12px}.dialogTop h2{font-size:20px;margin:0}.dialogTop button{width:36px;min-height:34px;font-size:23px}h3{font-size:13px;font-weight:500;margin:2px 0 0}.materialOptions{display:flex;gap:6px}.materialOptions button{flex:1;padding:6px;display:flex;flex-direction:column;gap:6px;align-items:center;font-size:12px;border-color:var(--line)}.sample{height:46px;width:100%;border-radius:8px;display:block}.wood{background:url('materials/wood.png') center/220px auto;box-shadow:inset 0 1px 2px #ffe1ac66,inset 0 -2px 2px #39200d}.metal{background:repeating-linear-gradient(0deg,#fff2 0 1px,transparent 1px 3px),linear-gradient(115deg,#647582,#f1f5f8 46%,#8294a4);box-shadow:inset 0 0 0 1px #b7c1c9}.glass{background:linear-gradient(35deg,transparent 40%,#fff9 41% 45%,transparent 46%),linear-gradient(115deg,#53899799,#c2e5e9dd,#78aebdaa);box-shadow:inset 0 0 0 1px #a6e0e8}.materialOptions button[aria-pressed=true],.colors button[aria-pressed=true]{border:2px solid var(--gold)}.selects{display:flex;gap:8px}.selects label{font-size:12px;display:grid;gap:5px;width:50%}select{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 3px;max-width:100%;font-size:12px;height:36px}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.colors button{min-height:32px;font-size:11px;border:1px solid #718079}.sound{font-size:12px;display:flex;align-items:center;gap:6px;min-height:24px}.note{font-size:10px;color:var(--muted);margin:0}#apply{width:100%;min-height:38px}#about{background:#254e40;color:#f5eddb}#about form{gap:12px}#about h2{font:700 26px Georgia,serif;margin:0}#about p{font-size:13px;line-height:1.8;margin:0}#about .tagline{color:#e0bd72}#about small{font-size:11px;color:#b2c6b8}.brand{height:80px;width:100%;object-fit:contain;background:#fff;border-radius:12px;padding:10px}.download{color:#e0bd72;font-size:12px;text-align:center;padding:5px}@media(max-height:560px){dialog{padding:8px 14px}dialog form{gap:5px}.sample{height:30px}.materialOptions button{gap:3px;padding:4px}#about form{gap:6px}#about .brand{height:50px}}