.screen-instrument{flex-direction:column;flex:1;align-self:stretch;gap:18px;width:100%;min-width:0;max-width:560px;min-height:0;margin:0 auto;padding-block:12px;display:flex}.screen-modes{background:#eef0e7;border:1px solid #d7dccd;border-radius:999px;flex-shrink:0;align-self:center;padding:4px;display:flex}.screen-modes button{color:#666f5b;background:0 0;border:0;border-radius:999px;min-width:100px;min-height:44px;font-size:13px}.screen-modes button[aria-pressed=true]{color:#26321d;background:#fff;box-shadow:0 1px 5px #293b1c12}.screen-preview{background:var(--test-colour,#fff);min-height:140px;color:var(--test-ink,#24251f);border:1px solid #dce0d3;border-radius:12px;flex:1;justify-content:center;align-items:center;padding:20px;display:flex;position:relative;overflow:hidden}.screen-preview:focus-visible{outline-offset:2px}.screen-preview-colour{text-align:center;flex-direction:column;gap:10px;display:flex}.screen-preview strong{letter-spacing:-1.6px;font-size:clamp(32px,8vw,48px);font-weight:500;line-height:1.12;display:block}.screen-preview-colour>span,.screen-preview-touch>span:last-child{letter-spacing:0;font-size:12px;line-height:1.5;display:block}.screen-preview-corners{opacity:.25;clip-path:polygon(0 0,22px 0,22px 1px,1px 1px,1px 22px,0 22px,0 0,100% 0,100% 22px,calc(100% - 1px) 22px,calc(100% - 1px) 1px,calc(100% - 22px) 1px,calc(100% - 22px) 0,100% 0,100% 100%,calc(100% - 22px) 100%,calc(100% - 22px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 22px),100% calc(100% - 22px),100% 100%,0 100%,0 calc(100% - 22px),1px calc(100% - 22px),1px calc(100% - 1px),22px calc(100% - 1px),22px 100%,0 100%);border:1px solid;position:absolute;inset:15px}.screen-preview-touch{text-align:center}.screen-mini-grid{grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(6,1fr);gap:3px;width:88px;height:112px;margin:0 auto 18px;display:grid}.screen-mini-grid i{border:1px solid #cad3bb;border-radius:2px}.screen-mini-grid i.marked{background:#869d60;border-color:#869d60}.screen-preview-touch strong{letter-spacing:-1px;margin-bottom:8px;font-size:32px}.screen-instrument[data-mode=touch] .screen-preview{color:#303c25;background:#edf1e6}.screen-bottom{text-align:center;flex-shrink:0;width:100%}.screen-swatches{justify-content:center;gap:3px;margin-bottom:16px;display:flex}.screen-swatches button{color:#5e6754;background:0 0;border:1px solid #0000;border-radius:9px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;min-width:44px;max-width:64px;min-height:58px;padding:5px 2px;font-size:10px;display:flex}.screen-swatches i{background:var(--swatch);border:1px solid #28322230;border-radius:50%;width:24px;height:24px;display:block;box-shadow:inset 0 0 0 2px #ffffff30}.screen-swatches button[aria-pressed=true]{color:#2d3c20;background:#f1f3e9;border-color:#8e9a7b}.screen-primary{color:#fff;background:#293223;border:1px solid #293223;border-radius:9px;justify-content:space-between;align-items:center;width:100%;min-height:50px;padding:12px 18px;font-size:14px;display:flex}.screen-primary:hover{background:#414e35}.screen-note{color:#737c66;margin-top:12px;font-size:10px;line-height:1.4}.screen-touch-note{color:#5f6d52;max-width:280px;margin:0 auto 16px;font-size:12px;line-height:1.6}.screen-stage{overscroll-behavior:contain;color:#24251f;background:#fff;border:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:auto}.screen-stage[open]{flex-direction:column;display:flex}.screen-stage::backdrop{background:#fff}.screen-stage-colour{background:var(--test-colour,#fff);position:absolute;inset:0}.screen-stage-heading{z-index:1;text-align:center;max-width:calc(100% - 32px);margin:max(14px,env(safe-area-inset-top)) 16px 12px;color:#242c1e;pointer-events:none;background:#f9faf5;border:1px solid #cdd3c3;border-radius:10px;flex-shrink:0;align-self:center;padding:8px 14px;position:relative}.screen-stage-heading h2{letter-spacing:-.2px;font-size:14px;font-weight:600}.screen-stage-heading p{margin-top:3px;font-size:10px;line-height:1.5}.screen-stage-space{flex:1;min-height:80px}.screen-stage-bottom{z-index:1;width:min(480px,100% - 24px);margin:12px 12px max(12px,env(safe-area-inset-bottom));color:#27331e;background:#f9faf5;border:1px solid #cdd3c3;border-radius:12px;flex-shrink:0;align-self:center;padding:8px;position:relative}.screen-stage-actions{gap:6px;display:flex}.screen-stage-actions button{white-space:nowrap;background:#eef1e7;border:1px solid #cbd4be;border-radius:7px;flex:1;min-width:44px;min-height:46px;padding:8px;font-size:12px}.screen-stage-actions .screen-exit{color:#fff;background:#293223;border-color:#293223}.screen-exit span{vertical-align:-1px;margin-left:4px;font-size:18px}.screen-stage[data-mode=touch]{background:#f1f4eb}.screen-stage[data-mode=touch] .screen-stage-heading{background:0 0;border:0;margin-bottom:8px;padding-block:4px}.screen-stage[data-mode=touch] .screen-stage-colour{display:none}.screen-touch-surface{touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;background:#fafcf6;border:1px solid #84946f;border-radius:4px;flex:1;min-height:80px;margin-inline:10px;position:relative;overflow:hidden}.screen-touch-grid{pointer-events:none;background:#c9d2bd;grid-template-rows:repeat(12,minmax(0,1fr));grid-template-columns:repeat(10,minmax(0,1fr));gap:1px;display:grid;position:absolute;inset:0}.screen-touch-grid i{background:#fafcf6;display:block}.screen-touch-grid i[data-hit]{background:#789552;box-shadow:inset 0 0 0 1px #547530}.screen-touch-grid i[data-hit]:after{content:"";background:#fff;border-radius:50%;width:3px;height:3px;margin:auto;display:block;position:relative;top:calc(50% - 1.5px)}.screen-touch-dots{pointer-events:none;position:absolute;inset:0}.screen-touch-dots i{color:#fff;background:#26331dd9;border:2px solid #fff;border-radius:50%;place-items:center;width:28px;height:28px;font-size:10px;font-style:normal;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #26331d}.screen-touch-stats{justify-content:space-between;gap:8px;padding:2px 4px 9px;font-size:10px;line-height:1.5;display:flex}.screen-touch-stats strong{font-variant-numeric:tabular-nums;font-weight:650}.screen-instrument [hidden]{display:none!important}@media (height<=650px) and (orientation:portrait){.screen-instrument{gap:12px;padding-block:4px}.screen-modes{padding:2px}.screen-swatches{margin-bottom:10px}.screen-note{margin-top:8px}.screen-mini-grid{width:66px;height:88px;margin-bottom:10px}.screen-preview-touch strong{font-size:28px}.screen-primary{min-height:46px}.screen-preview{min-height:140px}}@media (orientation:landscape) and (height<=500px){.screen-instrument{grid-template-rows:48px minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 24px;width:100%;max-width:850px;padding-block:4px;display:grid}.screen-modes{grid-column:2;place-self:start center}.screen-preview{grid-area:1/1/3;align-self:stretch;min-height:130px}.screen-bottom{grid-column:2;align-self:center}.screen-swatches{margin-bottom:8px}.screen-note{margin-top:7px}.screen-mini-grid{width:62px;height:80px;margin-bottom:8px}.screen-preview-touch strong{font-size:26px}.screen-touch-note{margin-bottom:12px}.screen-stage-heading{margin-top:max(6px,env(safe-area-inset-top));margin-bottom:6px;padding:4px 12px}.screen-stage-heading p{margin-top:0}.screen-stage-bottom{margin-top:6px;margin-bottom:max(6px,env(safe-area-inset-bottom));padding:6px}.screen-touch-stats{padding-bottom:4px}.screen-stage-actions button{min-height:44px}.screen-touch-surface{margin-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}}@media (prefers-reduced-motion:reduce){.screen-instrument *{scroll-behavior:auto}}