:root{--ink:#18213E;--muted:#5E667A;--paper:#F7F8FB;--surface:#FFFFFF;--tint:#F1EEFF;--brand:#5B4BD6;--brand-text:#4B3CBC;--brand-strong:#3B2E96;--line:#D9DCE6;--line-strong:#7C8598;--danger:#B3261E;--focus:#3B2E96;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--small:6px;--large:20px;--fs-small:12px;--fs-body:14px;--fs-section:20px;--fs-title:40px;--fs-word:64px;--word-leading:.96}*{box-sizing:border-box}body{margin:0;background-color:var(--paper);color:var(--ink);font-family:Inter,Noto Sans JP,system-ui,sans-serif;font-size:var(--fs-body);line-height:1.8}button,select{font:inherit;color:inherit}button,a,select,summary{-webkit-tap-highlight-color:transparent}button,select{min-height:48px;border:1px solid var(--line-strong);border-radius:var(--small);background-color:var(--surface)}button{padding:var(--s3) var(--s4);font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}button:hover{border-color:var(--brand);color:var(--brand-text)}button:active{transform:translateY(1px)}button:disabled{background-color:var(--paper);color:var(--muted);cursor:not-allowed;transform:none}button.primary{background-color:var(--brand);color:var(--surface);border-color:var(--brand)}button.primary:hover{background-color:var(--brand-strong)}button.primary:disabled{background-color:var(--paper);color:var(--muted);border-color:var(--line-strong)}:focus-visible{outline:2px solid var(--focus);outline-offset:4px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbols{display:none}[hidden]{display:none!important}a{color:var(--brand-text)}header,main{width:min(1120px,100% - 48px);margin-inline:auto}header{min-height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:var(--s4)}.brand{color:var(--ink);display:flex;align-items:center;gap:var(--s3);text-decoration:none;font-size:var(--fs-section);font-weight:700;min-height:48px}.brand svg{color:var(--brand-text)}.header-note{color:var(--muted);font-size:var(--fs-small)}.intro{display:flex;justify-content:space-between;align-items:end;gap:var(--s5);padding:var(--s7) 0 var(--s6)}.intro h1{font-size:var(--fs-title);line-height:1.35;font-weight:700;letter-spacing:0;margin:var(--s3) 0 0}.intro>p{color:var(--muted);margin:0 0 var(--s1);max-width:34em}.eyebrow{font-size:var(--fs-small);font-weight:700;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s6);align-items:start}.camera-panel,.word-panel{min-width:0}.camera-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3);font-size:var(--fs-small);color:var(--muted)}.metric{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace}.viewfinder{aspect-ratio:1;position:relative;overflow:hidden;border-radius:var(--large);background-color:var(--ink);color:var(--surface)}video{display:block;width:100%;height:100%;object-fit:cover}.reticle{position:absolute;inset:15%;pointer-events:none;display:none}.viewfinder.live .reticle{display:block}.reticle span{position:absolute;width:32px;height:32px;border-color:var(--surface);border-style:solid;border-width:0}.reticle span:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}.reticle span:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}.reticle span:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}.reticle span:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}.camera-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s4);padding:var(--s5);text-align:center}.camera-empty svg{width:48px;height:48px}.camera-empty p{font-size:var(--fs-section);line-height:1.5;margin:0}.camera-empty small{font-size:var(--fs-small)}.view-hint{position:absolute;bottom:0;left:0;right:0;padding:var(--s3) var(--s4);margin:0;background-color:var(--ink);font-size:var(--fs-small);text-align:center}.camera-controls{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap}.camera-controls .primary{flex:1}#status{color:var(--muted);font-size:var(--fs-small);margin:var(--s3) 0 0;min-height:24px}#status.error{color:var(--danger)}progress{width:100%;height:8px;accent-color:var(--brand);margin-top:var(--s2)}.word-panel{border-top:1px solid var(--line-strong);padding-top:var(--s5);margin-top:var(--s6)}label{display:block;font-size:var(--fs-small);font-weight:700;margin-bottom:var(--s2)}select{display:block;width:100%;padding:var(--s3);text-overflow:ellipsis;cursor:pointer}.word-result{padding:var(--s7) 0;border-bottom:1px solid var(--line)}.word-row{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)}#word{font-size:var(--fs-word);line-height:var(--word-leading);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere;min-width:0;margin:0;flex:1;padding-block:var(--s2)}#word[lang=ja]{font-size:var(--fs-title);letter-spacing:0;line-height:1.35}.sound-button{width:48px;height:48px;flex-shrink:0;padding:var(--s3);color:var(--brand-text)}#japanese{font-size:var(--fs-section);margin:var(--s4) 0 0}.muted{color:var(--muted);font-size:var(--fs-small);line-height:1.8}#result-note{margin:var(--s2) 0 0}.speech-settings{padding-block:var(--s5)}#voice-note,#speech-status{margin:var(--s2) 0 0;font-size:var(--fs-small)}#speech-status{color:var(--danger)}details{border-top:1px solid var(--line);padding-top:var(--s4)}summary{cursor:pointer;min-height:48px;display:list-item;align-content:center;font-weight:700}details p{max-width:34em;color:var(--muted);margin:var(--s3) 0}footer{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s6) 0;font-size:var(--fs-small);color:var(--muted)}footer a{display:inline-flex;align-items:center;min-height:44px}footer span{align-content:center}.language-control+.language-control{margin-top:var(--s4)}#detector-note{margin:var(--s2) 0 0}@media(max-width:768px){:root{--fs-title:32px;--fs-word:50px}header,main{width:calc(100% - 32px)}header{min-height:56px}.header-note{display:none}.intro{padding:var(--s5) 0;align-items:start}.intro>p{display:none}.intro h1 br{display:none}.workspace{grid-template-columns:1fr;gap:var(--s5)}.viewfinder{aspect-ratio:4/3;max-height:448px}.word-panel{margin-top:0;padding-top:var(--s5)}.word-result{padding:var(--s5) 0}.word-row{margin-top:var(--s3)}footer{flex-wrap:wrap;padding:var(--s5) 0}.reticle{inset:3.333% 15%}}.live-result{display:none}.live-result>div{min-width:0}.live-result strong{display:block;font-size:var(--fs-title);line-height:1.35;overflow-wrap:anywhere}.viewfinder{aspect-ratio:4/3}video{object-fit:contain}#object-overlay{position:absolute;inset:0;pointer-events:none}.object-box{position:absolute;display:block;pointer-events:auto;background:transparent;border:2px solid var(--surface);outline:1px solid var(--ink);border-radius:var(--small);padding:0;min-width:44px;min-height:44px;overflow:hidden;text-align:left;color:var(--surface)}.object-box span{position:absolute;left:0;top:0;max-width:100%;padding:var(--s1) var(--s2);background:var(--ink);color:var(--surface);font-size:var(--fs-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.object-box[aria-pressed=true]{border-color:var(--brand);outline:2px solid var(--surface)}.object-box[aria-pressed=true] span{background:var(--brand)}.object-box:hover{border-color:var(--surface);background:transparent}.object-box[aria-pressed=true]:hover{border-color:var(--brand)}.object-box:active{transform:none}.object-box:focus-visible{outline:3px solid var(--surface);outline-offset:2px}.object-choices{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}.object-choices button{font-size:var(--fs-small);padding:var(--s2) var(--s3)}.object-choices [aria-pressed=true]{background:var(--brand);color:var(--surface);border-color:var(--brand)}@media(max-width:768px){.capture-active .intro{display:none}.capture-active .workspace{padding-top:var(--s4)}.live-result{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body{line-height:1.6}.intro h1{line-height:1.15;letter-spacing:-.02em;font-family:Arial,system-ui,sans-serif}.maker{display:inline-flex;align-items:center;min-height:44px;gap:var(--s2);font-size:var(--fs-small);text-decoration:none;font-weight:700}.maker:hover{text-decoration:underline}#sample-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.privacy-note{font-size:var(--fs-small);color:var(--muted);margin:var(--s3) 0 0;max-width:34em}.privacy-note a{display:inline-flex;align-items:center;min-height:44px}.speech-settings .language-control{margin-top:var(--s4)}.speech-settings>label{margin-top:var(--s3)}.word-panel{margin-top:var(--s6)}@media(max-width:768px){.word-panel{margin-top:0}.intro h1{max-width:12em}.camera-controls button{flex-grow:1}}