*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#000;color:silver;font-family:Courier New,Courier,monospace}#app{width:100%;height:100%;display:flex;flex-direction:column}.screen{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.landing .ascii-title{margin-bottom:30px}.landing .ascii-title pre{font-size:10px;line-height:1.2;color:#0f0;text-shadow:0 0 5px rgba(0,255,0,.5)}.landing .description{max-width:400px;text-align:center;margin-bottom:30px;font-size:14px;line-height:1.6}.landing .requirements{margin-top:20px;color:gray}.landing ul{list-style:none;margin-top:10px}.landing ul li:before{content:"> ";color:#0f0}.start-button,.action-button{background:transparent;border:1px solid #00ff00;color:#0f0;padding:15px 30px;font-family:Courier New,Courier,monospace;font-size:16px;cursor:pointer;transition:all .2s}.start-button:hover,.action-button:hover{background:#0f0;color:#000}.start-button:active,.action-button:active{transform:scale(.98)}.action-button.primary{background:#0f0;color:#000}.action-button.primary:hover{background:#0c0}.privacy-note{margin-top:30px;font-size:11px;color:#555;text-align:center}.calibration .instruction{text-align:center;margin-bottom:30px}.calibration .instruction pre{font-size:12px;color:#ff0}.calibration .finger-guide{margin-top:20px}.calibration .finger-icon{display:flex;justify-content:center}.calibration .finger-icon pre{font-size:16px;color:#0f0;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}.quality-display{width:100%;max-width:300px;margin-bottom:20px}.quality-label,.progress-label{font-size:12px;color:gray;margin-bottom:5px}.quality-bar,.progress-bar{width:100%;height:20px;background:#222;border:1px solid #444;overflow:hidden}.quality-fill{height:100%;background:linear-gradient(90deg,red,#ff0,#0f0);width:0%;transition:width .2s}.progress-fill{height:100%;background:#0f0;width:0%;transition:width .3s}.quality-ascii{font-size:14px;margin-top:5px;color:#0f0;text-shadow:0 0 3px rgba(0,255,0,.5);font-family:Courier New,Courier,monospace}.calibration .status{margin:20px 0;font-size:14px;min-height:20px}.progress-container{width:100%;max-width:300px;margin-bottom:30px}.cancel-button{background:transparent;border:1px solid #ff0000;color:red;padding:10px 20px;font-family:Courier New,Courier,monospace;cursor:pointer;transition:all .2s}.cancel-button:hover{background:red;color:#000}.mirror{padding:0;position:relative}.visualization-container{width:100%;height:100%;position:relative;overflow:hidden}.metrics-overlay{position:absolute;top:20px;right:20px;background:#000c;border:1px solid #333;padding:15px;font-size:12px;z-index:10}.metrics-overlay.hidden{display:none}.metric{margin-bottom:10px;display:flex;align-items:baseline;gap:5px}.metric:last-child{margin-bottom:0}.metric .label{color:gray;min-width:40px}.metric .value{color:#0f0;font-size:18px;min-width:40px}.metric .unit{color:#555;font-size:11px}.controls-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);font-size:11px;color:#555;text-align:center;z-index:10;pointer-events:none}.summary .summary-header pre{font-size:10px;color:#0f0}.summary .session-viz{margin:20px 0;padding:10px;background:#111;border:1px solid #333}.summary .session-viz pre{font-size:10px;line-height:1;color:#0f0}.summary-stats{width:100%;max-width:300px;margin:20px 0}.stat-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #222}.stat-row:last-child{border-bottom:none}.stat-label{color:gray}.stat-value{color:#0f0}.summary-actions{display:flex;gap:15px;margin-top:20px;flex-wrap:wrap;justify-content:center}@media(max-width:480px){.screen{padding:15px}.landing .ascii-title pre{font-size:8px}.landing .description{font-size:13px}.start-button,.action-button{padding:12px 24px;font-size:14px}.metrics-overlay{top:10px;right:10px;padding:10px;font-size:11px}.metric .value{font-size:16px}.controls-hint{bottom:10px;font-size:10px}.summary-actions{flex-direction:column;width:100%;max-width:300px}.summary-actions .action-button{width:100%}}.screen{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.visualization-container canvas{display:block}
