*{box-sizing:border-box}body{margin:0;background:#10151b;color:#e7edf1;font:14px system-ui;padding:24px}button,select,input{font:inherit}button,select{cursor:pointer}.panel{max-width:720px;margin:auto;padding:24px;border:2px solid #798189;border-radius:30px;background:linear-gradient(135deg,#42474d,#25292e 45%,#16191d);box-shadow:inset 0 0 0 5px #1b1f23,0 16px 40px #0008}.title{display:flex;align-items:center;justify-content:space-between;letter-spacing:3px;margin-bottom:22px}.title strong{font-size:19px}.icon{width:26px;vertical-align:middle}.lcd{background:linear-gradient(#bbdc63,#91b74a);color:#25330e;border:10px solid #12160f;outline:1px solid #68725c;border-radius:16px;padding:16px 20px;font-family:ui-monospace,monospace;box-shadow:inset 0 2px 10px #536f32;overflow:hidden}.lcd h1{margin:0 0 8px;font-size:clamp(20px,4vw,32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lcd p{margin:5px 0;min-height:18px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.input{position:relative;min-width:0;aspect-ratio:1.55;background:url(svg/button-idle.svg) center/100% 100% no-repeat;border:0;color:#e7edf1;padding:47px 5px 12px;font-size:25px;border-radius:19px}.input:hover{background-image:url(svg/button-hover.svg)}.input:active{background-image:url(svg/button-pressed.svg)}.input.selected{background-image:url(svg/button-selected.svg)}.input.peeking{background-image:url(svg/button-peek.svg)}.input.returning{box-shadow:inset 0 0 0 2px #9cce66}.input:disabled{opacity:.4;cursor:default}.input:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid white;outline-offset:3px}.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.controls button,select,input{background:#1a2026;color:#e7edf1;border:1px solid #66717a;border-radius:8px;padding:9px}.controls button[aria-pressed=true]{border-color:#ffc45c;color:#ffc45c}.controls input{width:65px}.note{max-width:720px;margin:18px auto;color:#aebbc5;line-height:1.6}progress{width:100%;accent-color:#3b5117;height:5px}.small{font-size:12px}.previewbar{max-width:720px;margin:0 auto 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}@media(max-width:480px){body{padding:10px}.panel{padding:18px}.grid{gap:6px}.input{padding-top:40px;font-size:20px}.title strong{font-size:15px}}
/* Fixed LCD geometry: the countdown slot exists in every state. */
.lcd{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px;height:154px;align-items:center}
.lcd-copy{min-width:0;overflow:hidden}.lcd-copy h1,.lcd-copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.countdown{height:94px;width:90px;border-left:1px solid #536b2a;text-align:center;display:flex;flex-direction:column;justify-content:center;font-variant-numeric:tabular-nums}
.countdown span{font-size:10px;letter-spacing:1px}.countdown strong{font-size:46px;line-height:1.1;font-weight:700;width:2ch;align-self:center}
.view-toggle{background:#1a2026;border:1px solid #66717a;color:#e7edf1;padding:7px 9px;border-radius:7px;letter-spacing:0;font-size:12px}
.panel.compact{max-width:380px;padding:16px;border-radius:22px}.compact .title{margin-bottom:14px;letter-spacing:1px}.compact .title strong{font-size:14px}.compact .title .icon{width:18px}
.compact .lcd{height:112px;padding:8px 10px;border-width:6px;border-radius:11px;grid-template-columns:minmax(0,1fr) 60px;gap:6px}
.compact .lcd h1{font-size:19px}.compact .lcd p{font-size:10px;min-height:13px;line-height:13px;margin:4px 0}.compact .countdown{width:60px;height:76px}.compact .countdown strong{font-size:34px}.compact .countdown span{font-size:8px;letter-spacing:0}
.compact .grid{gap:7px;margin:14px 0}.compact .input{aspect-ratio:auto;height:39px;padding:0;background:linear-gradient(#363d44,#191e23);border:1px solid #626970;border-radius:8px;font-size:18px}.compact .input:hover{border-color:#b5c3cc}.compact .input.selected{border:2px solid #35dafa;color:#35dafa}.compact .input.peeking{border:2px solid #ffc45c;color:#ffc45c}.compact .input.returning{border-color:#9cce66}
.compact .controls{gap:5px;font-size:11px}.compact .controls button,.compact .controls input{padding:6px}.compact .controls input{width:43px}.compact .small{display:none}
@media(max-width:480px){.lcd{grid-template-columns:minmax(0,1fr) 60px;gap:6px;padding:10px;height:140px}.countdown{width:60px}.countdown strong{font-size:35px}.countdown span{font-size:8px;letter-spacing:0}.lcd h1{font-size:19px}.lcd p{font-size:10px}.title{letter-spacing:1px}}
/* Compact revision: retain the monitor artwork and reduce LCD height. */
.compact .lcd{height:94px;grid-template-columns:minmax(0,1fr) 52px;padding:6px 8px;gap:5px}
.compact .lcd h1{font-size:17px;margin:0 0 4px}.compact .lcd p{font-size:9px;line-height:11px;min-height:11px;margin:3px 0}
.compact .countdown{height:64px;width:52px}.compact .countdown strong{font-size:30px}.compact .countdown span{font-size:7px}
.compact .input{height:53px;padding:28px 3px 4px;background:url(svg/button-idle.svg) center/100% 100% no-repeat;border:0;border-radius:10px;font-size:16px;line-height:19px}
.compact .input:hover{background-image:url(svg/button-hover.svg)}.compact .input:active{background-image:url(svg/button-pressed.svg)}
.compact .input.selected{background-image:url(svg/button-selected.svg);border:0;color:#35dafa}
.compact .input.peeking{background-image:url(svg/button-peek.svg);border:0;color:#ffc45c}

.action-icon{width:18px;height:18px;vertical-align:middle;flex-shrink:0}.controls button,.view-toggle,.cycle-controls button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.cycle-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:12px}.cycle-controls button,.cycle-controls input{background:#1a2026;color:#e7edf1;border:1px solid #66717a;padding:8px;border-radius:8px}.cycle-controls button[aria-pressed=true]{color:#35dafa;border-color:#35dafa}.cycle-controls input[type=number]{width:65px}.cycle-controls details{width:100%}.cycle-controls summary{cursor:pointer;padding:5px 0}.cycle-controls details label{display:flex;align-items:center;gap:8px}.cycle-controls input[type=text]{width:180px}#cycle-error{color:#f08080}.compact .action-icon{width:14px;height:14px}.compact .cycle-controls{gap:6px;font-size:10px;margin-top:9px}.compact .cycle-controls button,.compact .cycle-controls input{padding:6px}.compact .cycle-controls input[type=number]{width:52px}

.lcd [hidden]{display:none!important}.lcd-custom{min-width:0;max-height:100%;overflow:auto;font-size:15px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}.lcd-custom>div:first-child{font-size:22px;font-weight:700}.lcd-no-countdown{grid-template-columns:minmax(0,1fr)!important}.lcd-no-countdown .countdown{display:none}.compact .lcd-custom{font-size:10px}.compact .lcd-custom>div:first-child{font-size:16px}.lcd-custom img,.lcd-custom svg{max-width:100%;max-height:100%}