:root{--color-bg: #000000;--color-text: #8a8a8a;--color-text-dim: #555555;--font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;--font-size-hint: 1rem;--font-size-kbd: .85rem;--action-icon-size: 1rem;--app-gap: 12px;--app-padding-x: 16px;--app-padding-y: 24px;--kbd-padding-y: .1em;--kbd-padding-x: .45em;--kbd-margin-x: .15em;--radius-kbd: 3px;--color-button-highlight-text: #e1b03c;--color-button-highlight-text-hover: #f9d893;--color-button-highlight-bg: #281200;--color-button-highlight-bg-hover: #382000;--color-device: #1a1a1a;--color-device-border: #000000;--color-well: #101010;--color-well-border: #080808;--color-cell-inactive: #2e2e2e;--color-cell-border: #0a0a0a;--color-cell-active: #ffffff;--color-ripple-ring: rgba(255, 255, 255, .55);--font-size-label: .75rem;--letter-spacing-label: .22em;--device-padding-top: 48px;--device-padding-x: 48px;--device-padding-bottom: 56px;--device-label-offset-top: 18px;--grid-wrap-padding: 10px;--size-cell: 16px;--size-ripple-ring-inset: -20%;--border-width: 1px;--radius-device: 8px;--radius-grid-wrap: 3px;--radius-ripple-ring: 50%;--duration-cell-light: 45ms;--duration-ripple-expand: .52s;--ease-out: ease-out;--ripple-expand-scale-start: .35;--ripple-expand-scale-end: 2.8;--ripple-expand-opacity-start: .85}@media (min-width: 640px){:root{--size-cell: 20px}}@media (min-width: 900px){:root{--size-cell: 24px}}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-family);min-height:100vh}#app{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--app-gap);min-height:100vh;padding:var(--app-padding-y) var(--app-padding-x);-webkit-user-select:none;user-select:none;overflow:auto}.device{position:relative;padding:var(--device-padding-top) var(--device-padding-x) var(--device-padding-bottom);background:var(--color-device);border:var(--border-width) solid var(--color-device-border);border-radius:var(--radius-device)}.device-label{position:absolute;top:var(--device-label-offset-top);left:50%;transform:translate(-50%);font-size:var(--font-size-label);letter-spacing:var(--letter-spacing-label);text-transform:uppercase;color:var(--color-text-dim)}.hint{margin:0;flex-shrink:0;font-size:var(--font-size-hint);color:var(--color-text-dim);text-align:center}.hint-kbd{display:inline-block;margin:0 var(--kbd-margin-x);padding:var(--kbd-padding-y) var(--kbd-padding-x);font-size:var(--font-size-kbd);color:var(--color-text);background:var(--color-cell-inactive);border:var(--border-width) solid var(--color-cell-border);border-radius:var(--radius-kbd)}.actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.action-button{display:inline-flex;align-items:center;gap:.375em;margin:0;padding:.35em .65em;font:inherit;font-size:var(--font-size-hint);color:var(--color-text);text-decoration:none;background:var(--color-cell-inactive);border:var(--border-width) solid var(--color-cell-border);border-radius:var(--radius-kbd);cursor:pointer}.action-button__icon-slot{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--action-icon-size);height:var(--action-icon-size)}.action-button__icon{display:block;width:var(--action-icon-size);height:var(--action-icon-size)}.action-button__icon--tab-devices{transform:scale(.72)}.action-button:hover{color:var(--color-cell-active)}.action-button--highlighted{color:var(--color-button-highlight-text);background:var(--color-button-highlight-bg);border-color:transparent}.action-button--highlighted:hover{color:var(--color-button-highlight-text-hover);background:var(--color-button-highlight-bg-hover);border-color:transparent}.action-button:active{opacity:.85}.grid-wrap{position:relative;padding:var(--grid-wrap-padding);background:var(--color-well);border:var(--border-width) solid var(--color-well-border);border-radius:var(--radius-grid-wrap);overflow:hidden}.grid{position:relative;display:grid;grid-template-columns:repeat(16,var(--size-cell));grid-auto-rows:var(--size-cell);gap:var(--border-width);background:var(--color-cell-border);touch-action:none;isolation:isolate}.cell{position:relative;width:var(--size-cell);height:var(--size-cell);background:var(--color-cell-inactive);cursor:pointer;overflow:hidden}.cell-light{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none}.cell.active .cell-light{background:var(--color-cell-active);opacity:1;transition:opacity var(--duration-cell-light) linear}.cell:not(.active) .cell-light{background:var(--color-cell-active);opacity:var(--ripple-heat, 0)}.ripple-ring{position:absolute;inset:var(--size-ripple-ring-inset);border-radius:var(--radius-ripple-ring);border:var(--border-width) solid var(--color-ripple-ring);pointer-events:none;animation:ripple-expand var(--duration-ripple-expand) var(--ease-out) forwards}@keyframes ripple-expand{0%{transform:scale(var(--ripple-expand-scale-start));opacity:var(--ripple-expand-opacity-start)}to{transform:scale(var(--ripple-expand-scale-end));opacity:0}}