:root{--bg:#FFFDF5;--fg:#1E293B;--muted:#F1F5F9;--muted-fg:#64748B;--accent:#8B5CF6;--accent-fg:#FFFFFF;--secondary:#F472B6;--tertiary:#FBBF24;--quaternary:#34D399;--border:#E2E8F0;--card:#FFFFFF;--ring:#8B5CF6;--danger:#EF4444;--accent-tint:#EDE9FE;--secondary-tint:#FCE7F3;--tertiary-tint:#FEF3C7;--quaternary-tint:#D1FAE5;--font-head:"Outfit",system-ui,sans-serif;--font-body:"Plus Jakarta Sans",system-ui,sans-serif;--r-sm:8px;--r-md:16px;--r-lg:24px;--r-full:9999px;--bw:2px;--pop-sm:2px 2px 0 var(--fg);--pop:4px 4px 0 var(--fg);--pop-lg:8px 8px 0 var(--fg);--ease-bounce:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) radial-gradient(var(--border) 1.5px,transparent 1.5px) fixed;background-size:100% 100%,26px 26px;color:var(--fg);font-family:var(--font-body);position:relative;overflow-x:hidden}
body::before,body::after{content:"";position:fixed;border-radius:50%;filter:blur(70px);opacity:.32;z-index:-1;pointer-events:none}
body::before{width:440px;height:440px;top:-160px;left:-140px;background:var(--tertiary)}
body::after{width:400px;height:400px;bottom:-170px;right:-150px;background:var(--secondary)}
h2{font-family:var(--font-head);font-weight:800}
.app{max-width:1540px;margin:auto;padding:16px 28px 34px;position:relative}
.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;color:var(--fg);gap:12px}
.topbar h1{font-family:var(--font-head);font-size:32px;margin:0;font-weight:800;letter-spacing:-.01em}
.rec{font-family:var(--font-head);font-weight:800;font-size:14px;letter-spacing:.05em;display:flex;align-items:center;gap:8px;background:#fff;border:var(--bw) solid var(--fg);border-radius:var(--r-full);padding:7px 16px;box-shadow:var(--pop-sm)}
.rec span{display:inline-block;width:11px;height:11px;background:var(--danger);border-radius:50%;animation:live-pulse 2s ease-in-out infinite}
.tracking-status{font-family:var(--font-head);font-size:13px;font-weight:800;color:var(--fg);letter-spacing:.04em;background:var(--quaternary-tint);border:var(--bw) solid var(--fg);border-radius:var(--r-full);padding:7px 16px;box-shadow:var(--pop-sm)}
.tracking-status.error{background:var(--danger);color:#fff;border-color:var(--fg)}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.tracking-panel{position:relative;background:var(--accent) radial-gradient(rgba(255,255,255,.22) 1.5px,transparent 1.5px);background-size:100% 100%,20px 20px;border:var(--bw) solid var(--fg);border-radius:var(--r-lg);padding:18px 28px 22px;color:#fff;box-shadow:var(--pop-lg)}
.camera-heading{display:flex;justify-content:space-between;font-family:var(--font-head);font-size:16px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.camera-layout{height:420px;display:grid;grid-template-columns:132px minmax(360px,560px) 132px;grid-template-rows:108px 184px 108px;justify-content:center;align-items:stretch;justify-items:stretch;gap:10px}
.camera-frame{grid-area:2/2;position:relative;height:184px;border-radius:var(--r-md);overflow:hidden;background:#1a1330;border:var(--bw) solid rgba(255,255,255,.5)}
.camera-frame video,.camera-frame canvas{position:absolute;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.camera-frame canvas{pointer-events:none}
.direction{border-radius:var(--r-md);background:rgba(255,255,255,.16);border:var(--bw) solid rgba(255,255,255,.45);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:800;position:relative;overflow:hidden;transition:background .15s,border-color .15s,transform .2s var(--ease-bounce),box-shadow .2s var(--ease-bounce)}
.dir-icon{font-size:34px;line-height:1}
.dir-label{font-family:var(--font-head);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.direction.active,.center-indicator.active{background:var(--secondary);border-color:#fff;color:#fff;box-shadow:0 0 0 3px rgba(244,114,182,.4)}
.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}
.center-indicator{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;width:30px;height:30px;background:#fff;color:var(--accent);border:var(--bw) solid var(--fg);display:grid;place-items:center}
.message-section{margin-top:14px;min-height:0;border:3px solid var(--quaternary);background:var(--card);border-radius:var(--r-md);padding:10px 18px;display:flex;justify-content:space-between;align-items:center;gap:16px;box-shadow:var(--pop)}
.message-content{min-width:0;flex:1}
.section-label{font-family:var(--font-head);color:var(--muted-fg);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.message-section .section-label{font-size:11px;margin:0 0 2px}
.message-section output{display:block;font-family:var(--font-body);font-size:30px;font-weight:700;line-height:1.2;color:var(--fg);overflow-wrap:anywhere}
.clear-button,.recalibrate{background:#fff;border:var(--bw) solid var(--fg);border-radius:var(--r-full);color:var(--fg);font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:.02em;min-height:80px;padding:12px 26px;cursor:pointer;box-shadow:var(--pop);transition:transform .2s var(--ease-bounce),box-shadow .2s var(--ease-bounce),background .15s}
.clear-button{font-size:14px;min-height:44px;padding:8px 18px;border-radius:var(--r-full);text-transform:uppercase}
.clear-button:hover,.recalibrate:hover{background:var(--tertiary);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fg)}
.clear-button:active,.recalibrate:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--fg)}
.actions{display:grid;grid-template-columns:1fr;gap:22px;margin:18px 0}
.action-button{min-height:100px;border:var(--bw) solid var(--fg);border-radius:var(--r-full);color:#fff;background:var(--accent);font-family:var(--font-head);font-size:38px;font-weight:800;cursor:pointer;box-shadow:var(--pop-lg);display:flex;align-items:center;justify-content:center;gap:16px;transition:transform .2s var(--ease-bounce),box-shadow .2s var(--ease-bounce),background .15s}
.action-button span{font-size:34px;width:64px;height:64px;background:rgba(255,255,255,.22);border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.action-button:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--fg)}
.action-button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--fg)}
.listen-result{min-height:27px;margin:0 0 10px;color:var(--muted-fg);font-size:22px;font-weight:700}
.word-section{margin-top:17px}
.word-section h2{font-size:23px}
.word-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.word-button{min-height:94px;padding:12px 16px;background:var(--accent-tint);color:var(--fg);font-family:var(--font-head);font-size:32px;font-weight:800;border:var(--bw) solid var(--fg);border-radius:var(--r-md);position:relative;overflow:hidden;cursor:pointer;box-shadow:var(--pop);transition:transform .2s var(--ease-bounce),box-shadow .2s var(--ease-bounce)}
.word-button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fg)}
.word-button:nth-child(3n){background:#fff;border-color:var(--border)}
.word-button.focused,[data-gaze-target].focused{outline:6px solid var(--tertiary);outline-offset:2px;background:var(--accent)!important;color:#fff!important}
.direction.focused{background:var(--tertiary)!important;border-color:var(--fg)!important;color:var(--fg)!important;outline-color:var(--fg)}
.direction.focused::after{background:conic-gradient(rgba(30,41,59,.55) calc(var(--dwell,0)*1turn),transparent 0)}
.word-button.selected{background:var(--quaternary)!important;color:#fff!important}
.focused::after{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient(var(--tertiary) calc(var(--dwell,0)*1turn),transparent 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:7px;pointer-events:none}
.settings{margin-top:26px;padding:16px 22px;background:#fff;border:var(--bw) solid var(--border);border-radius:var(--r-lg);display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.settings h2{margin:0;padding-right:20px;border-right:var(--bw) solid var(--border);align-self:center;font-size:16px}
.settings label{flex:0 0 auto;font-family:var(--font-head);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-fg);display:flex;flex-direction:column;gap:5px;white-space:nowrap}
.settings label.switch-field{flex-direction:row;align-items:center;gap:10px}
.switch-field input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{width:44px;height:26px;flex:0 0 auto;background:#fff;border:var(--bw) solid var(--fg);border-radius:var(--r-full);position:relative;transition:background .2s}
.switch-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--fg);border-radius:50%;transition:transform .2s var(--ease-bounce),background .2s}
.switch-field input:checked+.switch-track{background:var(--quaternary-tint)}
.switch-field input:checked+.switch-track::after{transform:translateX(18px);background:var(--quaternary)}
.switch-field input:focus-visible+.switch-track{outline:3px solid var(--ring);outline-offset:2px}
select,input[type=password],input[type=text]{display:block;min-height:38px;border:var(--bw) solid var(--border);border-radius:var(--r-sm);background:white;font-family:var(--font-body);font-size:14px;padding:3px 10px;color:var(--fg);font-weight:400;letter-spacing:normal;text-transform:none}
#voiceSelect{max-width:190px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
input[type=password],input[type=text]{min-width:150px}
.settings-divider{align-self:stretch;width:1px;background:var(--border);margin:0}
.recalibrate{min-height:38px;font-size:13px;padding:6px 18px;flex:0 0 auto}
.debug-toggle{border:0;background:none;color:var(--muted-fg);font-size:13px;cursor:pointer;flex:0 0 auto}
@media(min-width:901px){.settings{flex-wrap:nowrap;overflow-x:auto}}
.permission-screen{min-height:100vh;display:grid;place-items:center;background:var(--tertiary-tint);padding:25px;position:relative;overflow:hidden}
.permission-screen::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:var(--tertiary);opacity:.55;top:-190px;right:-190px}
.permission-screen::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:var(--accent);opacity:.2;bottom:-160px;left:-140px}
.permission-card{position:relative;max-width:650px;text-align:center;background:#fff;border:var(--bw) solid var(--fg);border-radius:var(--r-lg);padding:56px 48px 48px;color:var(--fg);box-shadow:var(--pop-lg);animation:pop-in .45s var(--ease-bounce)}
.eye-mark{width:96px;height:96px;margin:-92px auto 18px;display:grid;place-items:center;font-size:50px;color:#fff;background:var(--accent);border:var(--bw) solid var(--fg);border-radius:50%;box-shadow:var(--pop)}
.eye-mark:hover{animation:wiggle .5s var(--ease-bounce)}
.permission-card h1{font-family:var(--font-head);font-size:46px;margin:0;font-weight:800}
.permission-card p{font-size:22px;line-height:1.45;color:var(--muted-fg)}
.primary-action{background:var(--accent);border:var(--bw) solid var(--fg);border-radius:var(--r-full);color:#fff;font-family:var(--font-head);font-weight:800;font-size:26px;min-height:80px;padding:15px 40px;box-shadow:var(--pop-lg);cursor:pointer;transition:transform .2s var(--ease-bounce),box-shadow .2s var(--ease-bounce)}
.primary-action:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--fg)}
.primary-action:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--fg)}
.notice{color:var(--danger)!important;font-size:17px!important;font-weight:700}
.calibration{position:fixed;inset:0;z-index:20;background:rgba(255,253,245,.95);cursor:none}
.calibration p{position:absolute;top:8%;width:100%;text-align:center;color:var(--fg);font-family:var(--font-head);font-size:40px;font-weight:800}
.calibration div{position:absolute;width:58px;height:58px;background:var(--accent);border:8px solid #fff;border-radius:50%;box-shadow:0 0 0 6px var(--fg);transform:translate(-50%,-50%)}
#gazeCursor{position:fixed;z-index:30;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--secondary);border:4px solid white;box-shadow:0 0 0 3px var(--fg);pointer-events:none;left:-100px;top:-100px;transition:width .1s,height .1s,margin .1s}
.debug-panel{position:fixed;right:18px;bottom:18px;background:#1E293Beb;color:#fff;padding:15px;border-radius:var(--r-md);border:var(--bw) solid var(--tertiary);font:14px monospace;z-index:40;white-space:pre-line}
@keyframes pop-in{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:scale(1)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.word-carousel{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(280px,3fr) minmax(110px,.7fr);gap:17px;align-items:stretch}
.active-carousel h2{color:var(--accent)}
.active-carousel .carousel-word{box-shadow:0 0 0 5px var(--accent),var(--pop)}
.carousel-control,.carousel-word,.carousel-select{min-height:108px;border:var(--bw) solid var(--fg);border-radius:var(--r-lg);font-family:var(--font-head);font-weight:800;color:#fff;position:relative;overflow:hidden;cursor:pointer;box-shadow:var(--pop);transition:transform .2s var(--ease-bounce),box-shadow .2s var(--ease-bounce),background .15s;display:flex;align-items:center;justify-content:center;text-align:center}
.carousel-control{font-size:56px;background:#fff;color:var(--fg)}
.carousel-control:hover,.carousel-select:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--fg)}
.carousel-control:active,.carousel-select:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--fg)}
.carousel-word{font-size:42px;background:var(--accent-tint);color:var(--fg);cursor:default;padding:8px 14px;overflow-wrap:anywhere}
.carousel-select{flex-direction:column;gap:4px;font-size:19px;line-height:1.1;background:var(--accent);padding:8px}
.carousel-select span{font-size:32px;line-height:.9}
.carousel-control.focused,.carousel-select.focused{background:var(--tertiary)!important;color:var(--fg)!important}
.carousel-control.selected,.carousel-select.selected{background:var(--quaternary)!important;color:#fff!important}
.carousel-control.focused::after,.carousel-select.focused::after{content:"";position:absolute;inset:0;border-radius:inherit;background:conic-gradient(var(--fg) calc(var(--dwell,0)*1turn),transparent 0);opacity:.18;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:8px;pointer-events:none}
@media(max-width:900px){.app{padding:12px}.camera-layout{grid-template-columns:100px minmax(300px,1fr) 100px;grid-template-rows:84px 184px 84px;height:372px}.dir-icon{font-size:28px}.dir-label{font-size:10px}.word-button{font-size:27px}.word-carousel{grid-template-columns:72px 1fr 72px;gap:12px}.carousel-word{font-size:30px}.message-section output{font-size:36px}}
@media(max-height:800px){.camera-layout{height:314px;grid-template-rows:72px 150px 72px}.camera-frame{height:150px}.dir-icon{font-size:24px}.dir-label{font-size:9px}.word-button{min-height:82px}.tracking-panel{padding:12px}.actions{margin:12px 0}.action-button{min-height:82px}.carousel-control,.carousel-word,.carousel-select{min-height:82px}}
.gaze-stable{background:var(--quaternary)!important;box-shadow:0 0 0 7px rgba(52,211,153,.4)!important}
@media(max-width:480px){.topbar{flex-wrap:wrap;height:auto;padding:10px 0;row-gap:6px}.topbar h1{order:-1;width:100%;text-align:center;font-size:24px}.camera-heading{font-size:12px}.camera-layout{grid-template-columns:46px minmax(170px,1fr) 46px;grid-template-rows:64px 140px 64px;height:288px;gap:6px}.dir-icon{font-size:24px}.dir-label{display:none}.camera-frame{height:140px}.message-section{padding:10px 14px;gap:10px}.message-section output{font-size:24px}.clear-button{min-height:40px;font-size:13px;padding:6px 14px}.action-button{min-height:74px;font-size:30px}.action-button span{font-size:26px;width:48px;height:48px}.word-carousel{grid-template-columns:44px 1fr 44px;gap:8px}.carousel-word{font-size:19px;padding:6px 8px}.carousel-control{font-size:26px}.carousel-control,.carousel-word,.carousel-select{min-height:60px}.settings-divider{display:none}}