*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html,body{width:100%;height:100%;overflow:hidden;background:#000;color:#ccc;font-family:-apple-system,Helvetica Neue,sans-serif}#app{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}#clock-canvas{touch-action:none}#rec-panel{position:fixed;top:0;right:-100%;width:100%;height:100%;background:#111;transition:right .3s ease;z-index:10;overflow-y:auto;padding:60px 20px 20px}#rec-panel.open{right:0}#rec-panel h2{font-size:18px;color:#888;margin-bottom:16px}.rec-item{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #222}.rec-info{flex:1}.rec-date{font-size:14px;color:#aaa}.rec-duration{font-size:12px;color:#666;margin-top:2px}.rec-actions{display:flex;gap:12px}.rec-btn{background:#222;border:none;color:#aaa;font-size:13px;padding:8px 14px;border-radius:6px;cursor:pointer}.rec-btn:active{background:#333}.rec-btn.delete{color:#f55}#back-btn{position:absolute;top:16px;left:16px;background:none;border:none;color:#4af;font-size:16px;cursor:pointer;z-index:11}#swipe-hint{position:fixed;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:#333;z-index:5}#controls{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px;transition:opacity .3s}#controls.hidden{display:none}#rec-indicator{display:flex;align-items:center;gap:8px;opacity:.4;transition:opacity .3s}#rec-indicator.active{opacity:1}#rec-dot{width:12px;height:12px;border-radius:50%;background:#555;transition:background .3s}#rec-dot.active{background:#f33;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}#rec-timer{font-family:monospace;font-size:18px;color:#888}#rec-indicator.active #rec-timer{color:#f33}#rec-buttons{display:flex;gap:16px}.ctrl-btn{padding:10px 24px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:opacity .2s}.ctrl-btn:disabled{opacity:.3;cursor:default}.ctrl-btn.rec{background:#2a1111;color:#f44;border:1px solid #f44}.ctrl-btn.rec:not(:disabled):active{background:#3a1515}.ctrl-btn.stop{background:#1a1a1a;color:#aaa;border:1px solid #444}.ctrl-btn.stop:not(:disabled):active{background:#2a2a2a}#help{margin-top:16px;text-align:center}#help summary{font-size:12px;color:#444;cursor:pointer;list-style:none}#help summary::-webkit-details-marker{display:none}#help summary:before{content:"▸ "}#help[open] summary:before{content:"▾ "}.help-content{margin-top:8px;text-align:left;display:inline-block}.help-content p{font-size:12px;color:#555;line-height:1.8}#footer{position:fixed;bottom:12px;width:100%;text-align:center;font-size:11px;color:#333;letter-spacing:1px}