*{box-sizing:border-box}
:root{--bg:#050505;--panel:#0b0b0b;--line:#242424;--muted:#737373;--text:#f2f2f2}
html,body{margin:0;min-height:100%;width:100%}
body{background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.035),transparent 34%),linear-gradient(180deg,#070707 0%,#030303 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.04em;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
button,input{font:inherit}button{color:inherit}
.app{width:min(1100px,calc(100% - 36px));min-height:100vh;margin:0 auto;display:grid;grid-template-rows:auto 1fr auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0 18px;border-bottom:1px solid var(--line)}
.brand{font-size:18px;font-weight:800;letter-spacing:.26em}
.file-area{display:flex;align-items:center;gap:12px;min-width:0}
.file-button{border:1px solid #3a3a3a;background:#101010;padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.14em;cursor:pointer;user-select:none;transition:.15s}
.file-button:hover{border-color:#767676;background:#161616}
#fileInput{display:none}.file-name{max-width:min(38vw,280px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:11px;letter-spacing:.08em}
.reader{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:18px 0 30px}
.status-row{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;text-transform:uppercase}
.word-stage{position:relative;min-height:clamp(230px,42vh,440px);display:grid;place-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:linear-gradient(90deg,transparent 49.95%,rgba(255,255,255,.08) 50%,transparent 50.05%),radial-gradient(circle,rgba(255,255,255,.025),transparent 60%)}
.guide{position:absolute;top:50%;width:1px;height:78px;transform:translateY(-50%);background:rgba(255,255,255,.15)}.guide-left{right:calc(50% + 17px)}.guide-right{left:calc(50% + 17px)}
.word{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(92vw,920px);padding:30px 12px;font-size:72px;line-height:1;font-weight:650;letter-spacing:-.04em;text-align:center;white-space:nowrap}
.word-left,.word-right{overflow:hidden}.word-left{text-align:right}.word-right{text-align:left}
.word-focus{position:relative}.word-focus:after{content:"";position:absolute;left:50%;bottom:-22px;width:1px;height:10px;transform:translateX(-50%);background:rgba(255,255,255,.34)}
.progress-track{height:2px;width:100%;background:#151515;overflow:hidden}.progress-bar{width:0;height:100%;background:#f1f1f1;transition:width .1s linear}
.controls{display:flex;justify-content:center;align-items:center;gap:10px}
.control-button{height:46px;min-width:46px;border:1px solid #2d2d2d;background:#0d0d0d;cursor:pointer;font-size:16px;transition:.15s}
.control-button:hover{background:#151515;border-color:#6b6b6b}.control-button:active{transform:translateY(1px)}
.control-button.main{min-width:110px;font-size:11px;letter-spacing:.16em;font-weight:800}
.settings{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
.setting{border:1px solid var(--line);background:rgba(10,10,10,.78);padding:14px}.setting-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.setting label,.setting output{font-size:10px;letter-spacing:.13em}.setting output{color:#cfcfcf}
input[type=range]{width:100%;appearance:none;height:2px;background:#2a2a2a;outline:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:1px solid #8c8c8c;background:#050505;border-radius:50%;cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:1px solid #8c8c8c;background:#050505;border-radius:50%;cursor:pointer}
.options{display:flex;gap:24px;flex-wrap:wrap;padding:2px}
.switch-row{display:inline-flex;align-items:center;gap:10px;font-size:10px;color:#b4b4b4;cursor:pointer;user-select:none}.switch-row input{display:none}
.switch{position:relative;width:34px;height:18px;border:1px solid #444;background:#0d0d0d;transition:.15s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;background:#777;transition:.15s}
.switch-row input:checked+.switch{background:#f0f0f0;border-color:#f0f0f0}.switch-row input:checked+.switch:after{left:19px;background:#050505}
.footer{display:flex;justify-content:space-between;gap:20px;padding:15px 0 20px;border-top:1px solid var(--line);color:#595959;font-size:9px;letter-spacing:.14em}
@media(max-width:720px){.app{width:min(100% - 22px,1100px)}.topbar{align-items:flex-start;flex-direction:column}.file-area{width:100%}.file-name{max-width:50vw}.word{font-size:52px}.settings{grid-template-columns:1fr}.footer{font-size:8px;flex-wrap:wrap}}
@media(max-width:470px){.word{font-size:38px}.word-stage{min-height:270px}.guide-left{right:calc(50% + 12px)}.guide-right{left:calc(50% + 12px)}}