:root{--color-bg: #222;--color-surface: #1a1a1a;--color-surface-alt: #111;--color-primary: #0f0;--color-primary-dim: rgba(0, 255, 0, .03);--color-primary-subtle: rgba(0, 255, 0, .08);--color-primary-soft: rgba(0, 255, 0, .1);--color-primary-medium: rgba(0, 255, 0, .15);--color-primary-strong: rgba(0, 255, 0, .3);--color-danger: #f00;--font-family: "Arial", sans-serif;--font-size-display: 8em;--font-size-timezone: 2em;--font-size-toggle: 1.8em;--font-size-timer-display: 3em;--font-size-timer-finish: 1.5em;--font-size-timer-input: 1.2em;--font-size-body: 1em;--font-size-small: .85em;--font-size-xs: .8em;--font-size-env: 2em;--font-weight-bold: bold;--space-2xs: 2px;--space-xs: 4px;--space-sm: 6px;--space-md: 8px;--space-lg: 10px;--space-xl: 12px;--space-2xl: 16px;--space-3xl: 20px;--space-4xl: 24px;--panel-width: 320px;--panel-padding-x: var(--space-4xl);--panel-padding-y: var(--space-2xl);--panel-content-width: calc(var(--panel-width) - var(--panel-padding-x) * 2);--border-width: 1px;--border-width-strong: 2px;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px;--glow-sm: 0 0 5px var(--color-primary);--glow-md: 0 0 10px var(--color-primary);--glow-lg: 0 0 20px var(--color-primary);--glow-subtle: 0 0 20px var(--color-primary-subtle);--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease}body{display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background-color:var(--color-bg);color:var(--color-primary);font-family:var(--font-family);overflow-y:auto;overflow-x:hidden}#environment-marker{position:fixed;bottom:var(--space-3xl);right:var(--space-3xl);font-size:var(--font-size-env);color:var(--color-primary);text-shadow:var(--glow-md);z-index:1000}#clock-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3xl);margin-top:-8vh}#clock{font-size:var(--font-size-display);text-align:center;font-weight:var(--font-weight-bold)}#timezone{font-size:var(--font-size-timezone);text-align:center;margin-top:var(--space-lg);color:var(--color-primary)}#timer-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);position:relative}#timer-toggle{background:none;border:var(--border-width-strong) solid var(--color-primary);color:var(--color-primary);font-size:var(--font-size-toggle);cursor:pointer;border-radius:var(--border-radius-md);padding:var(--space-xs) var(--space-xl);transition:background-color var(--transition-normal),box-shadow var(--transition-normal);line-height:1}#timer-toggle:hover,#timer-toggle:focus-visible{background-color:var(--color-primary-soft);box-shadow:var(--glow-md)}#timer-toggle.active{box-shadow:var(--glow-md)}#timer-toggle.running{animation:timer-pulse 1.5s ease-in-out infinite}#timer-panel{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-sm);padding:var(--panel-padding-y) var(--panel-padding-x);border:var(--border-width) solid var(--color-primary);border-radius:var(--border-radius-lg);background-color:var(--color-surface);box-sizing:border-box;width:var(--panel-width);box-shadow:var(--glow-subtle);animation:timer-panel-open .3s cubic-bezier(.34,1.56,.64,1) both}#timer-panel[hidden]{display:none}#timer-panel.closing{animation:timer-panel-close .2s ease-in both;pointer-events:none}#timer-display{font-size:var(--font-size-timer-display);font-weight:var(--font-weight-bold);text-align:center;letter-spacing:.05em;font-variant-numeric:tabular-nums;width:100%}#timer-finish-time{font-size:var(--font-size-timer-finish);text-align:center;opacity:0;transition:opacity var(--transition-slow);min-height:1.4em;color:var(--color-primary);font-variant-numeric:tabular-nums;letter-spacing:.06em;width:100%}#timer-finish-time.visible{opacity:.75}#timer-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-xs);width:100%}#timer-controls input[type=number]{width:2.5em;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-timer-input);text-align:center;background-color:var(--color-surface-alt);border:var(--border-width) solid var(--color-primary);border-radius:var(--border-radius-sm);color:var(--color-primary);font-family:var(--font-family);-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}#timer-controls input[type=number]::-webkit-inner-spin-button,#timer-controls input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}#timer-controls button{background:none;border:var(--border-width) solid var(--color-primary);color:var(--color-primary);font-size:var(--font-size-timer-input);cursor:pointer;border-radius:var(--border-radius-sm);padding:var(--space-xs) var(--space-lg);transition:background-color var(--transition-normal),opacity var(--transition-normal),visibility var(--transition-normal);line-height:1;opacity:0;visibility:hidden}#timer-controls:hover button,#timer-controls:focus-within button{opacity:.5;visibility:visible}#timer-controls button:hover,#timer-controls button:focus-visible{opacity:1!important;background-color:var(--color-primary-medium)}.timer-colon{font-size:var(--font-size-timer-input);font-weight:var(--font-weight-bold)}#timer-presets{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);max-height:66px;overflow-y:auto;overflow-x:hidden;padding:var(--space-xs) var(--space-2xs);width:100%;box-sizing:border-box;scrollbar-width:thin}.preset-row{display:flex;align-items:center;justify-content:space-between;background:var(--color-primary-dim);border:var(--border-width) solid rgba(0,255,0,.2);border-radius:var(--border-radius-sm);padding:5px var(--space-md);cursor:pointer;transition:background-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);gap:var(--space-sm);min-width:0;box-sizing:border-box}.preset-row:hover{background-color:#00ff001f;box-shadow:0 0 8px var(--color-primary-strong);transform:scale(1.02)}.preset-row-label{font-size:var(--font-size-small);line-height:1;-webkit-user-select:none;user-select:none}.preset-row-remove{background:none;border:none;color:var(--color-primary);opacity:.5;font-size:.9em;line-height:1;padding:0 var(--space-2xs);cursor:pointer;transition:opacity var(--transition-fast),color var(--transition-fast);flex-shrink:0}.preset-row-remove:hover{opacity:1;color:var(--color-danger)}#timer-presets-bar{display:flex;align-items:center;gap:var(--space-sm);justify-content:center;width:100%;transition:opacity var(--transition-normal)}#timer-preset-add{background:none;border:var(--border-width) dashed var(--color-primary);color:var(--color-primary);font-size:var(--font-size-xs);cursor:pointer;border-radius:var(--border-radius-sm);padding:var(--space-2xs) var(--space-lg);transition:background-color var(--transition-normal),box-shadow var(--transition-normal);line-height:1;opacity:.7}#timer-preset-add:hover,#timer-preset-add:focus-visible{background-color:var(--color-primary-soft);opacity:1;box-shadow:var(--glow-sm)}#timer-preset-add.inactive{opacity:.3;cursor:default;box-shadow:none}#timer-preset-add.inactive:hover,#timer-preset-add.inactive:focus-visible{background-color:transparent;opacity:.3;box-shadow:none}#timer-actions{display:flex;gap:var(--space-md);width:100%}#timer-actions button{flex:1;background:none;border:var(--border-width) solid var(--color-primary);color:var(--color-primary);font-size:var(--font-size-body);cursor:pointer;border-radius:var(--border-radius-sm);padding:var(--space-sm) var(--space-2xl);text-align:center;transition:background-color var(--transition-normal),box-shadow var(--transition-normal)}#timer-actions button:hover,#timer-actions button:focus-visible{background-color:var(--color-primary-medium);box-shadow:var(--glow-md)}#timer-actions button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}#timer-panel,#timer-presets{scrollbar-width:thin;scrollbar-color:var(--color-primary) transparent}#timer-panel::-webkit-scrollbar,#timer-presets::-webkit-scrollbar{width:6px;height:6px}#timer-panel::-webkit-scrollbar-track,#timer-presets::-webkit-scrollbar-track{background:transparent;border-radius:3px}#timer-panel::-webkit-scrollbar-thumb,#timer-presets::-webkit-scrollbar-thumb{background-color:var(--color-primary);border-radius:3px;box-shadow:var(--glow-sm)}#timer-panel::-webkit-scrollbar-thumb:hover,#timer-presets::-webkit-scrollbar-thumb:hover{background-color:var(--color-primary);box-shadow:var(--glow-md)}#timer-panel::-webkit-scrollbar-corner{background:transparent}@keyframes timer-pulse{0%,to{box-shadow:0 0 5px var(--color-primary)}50%{box-shadow:0 0 20px var(--color-primary)}}@keyframes timer-panel-open{0%{opacity:0;transform:translateY(-8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes timer-panel-close{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.95)}}@keyframes timer-flash{0%,to{opacity:1}50%{opacity:.2}}body.timer-finished #clock-container{animation:timer-flash .5s ease-in-out 4}@media (max-width: 600px){#clock-container{gap:var(--space-xl)}#clock{font-size:4em}#timezone{font-size:var(--font-size-body)}#timer-toggle{font-size:1.4em;padding:3px var(--space-lg)}#timer-display{font-size:2em}#timer-controls input[type=number]{width:2em;font-size:var(--font-size-body)}#timer-controls button{font-size:var(--font-size-body);padding:3px var(--space-md)}#timer-panel{padding:var(--space-lg) var(--space-xl);max-width:calc(100vw - 24px)}#timer-actions button{font-size:.9em;padding:5px var(--space-xl)}}@media (max-width: 400px){#clock{font-size:3em}#timezone{font-size:.85em}#timer-panel{padding:var(--space-md) var(--space-lg)}}@media (max-height: 500px) and (orientation: landscape){body{overflow:auto;min-height:100vh}#clock-container{gap:var(--space-sm)}#clock{font-size:2.5em}#timezone{font-size:.8em;margin-top:var(--space-xs)}#timer-wrapper{gap:var(--space-xs)}#timer-toggle{font-size:1.1em;padding:var(--space-2xs) var(--space-md)}#timer-display{font-size:1.4em}#timer-panel{padding:var(--space-sm) var(--space-lg);gap:var(--space-sm);max-width:calc(100vw - 16px)}#timer-controls input[type=number]{width:1.8em;font-size:.85em;padding:var(--space-2xs) var(--space-xs)}#timer-controls button{font-size:.85em;padding:var(--space-2xs) var(--space-sm)}.timer-colon{font-size:.9em}#timer-actions button{font-size:.8em;padding:var(--space-xs) var(--space-lg)}}