:root{--page:#f6f7f3;--surface:#fff;--surface-soft:#eef5f1;--ink:#17201b;--muted:#5c6962;--line:#ced8d1;--primary:#176b46;--primary-dark:#0d4c31;--primary-soft:#dcefe5;--danger:#a53030;--danger-soft:#fce7e7;--warning:#76520c;--warning-soft:#fff2cf;--focus:#176b46;--shadow:0 10px 30px #1f372b1a}*{box-sizing:border-box}html{background:var(--page);-webkit-text-size-adjust:100%;min-height:100%}body{background:var(--page);min-height:100svh;color:var(--ink);margin:0;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic UI,Yu Gothic,Meiryo,sans-serif;line-height:1.6}.ui-ruby{ruby-align:center;ruby-position:over}.ui-ruby rt{color:currentColor;letter-spacing:0;font-size:.5em;font-weight:700;line-height:1}button,input{font:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.site-header{border-bottom:1px solid var(--line);background:var(--page)}.site-header-inner{width:min(100%,46rem);padding:max(.65rem, env(safe-area-inset-top)) max(.65rem, env(safe-area-inset-right)) .35rem max(.65rem, env(safe-area-inset-left));justify-content:space-between;align-items:center;gap:.75rem;margin:0 auto;display:flex}.site-title{letter-spacing:.02em;min-width:0;margin:0;font-size:clamp(1.45rem,6.5vw,2.25rem);font-weight:800;line-height:1.25}.site-title-link{color:var(--ink);text-decoration:none}.site-title-link:hover{color:var(--primary-dark)}.site-title-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:.25rem}.reader-shell{width:min(100%,46rem);padding:.65rem max(.65rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.65rem, env(safe-area-inset-left));margin:0 auto}.reader-card,.result-card,.loading-card{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:1rem}.loading-card{padding:1.25rem}.external-browser-card{border:2px solid var(--primary);background:var(--surface);box-shadow:var(--shadow);text-align:center;border-radius:1rem;margin-top:1.5rem;padding:clamp(1.25rem,5vw,2rem)}.external-browser-context{color:var(--primary-dark);margin:0;font-size:1rem;font-weight:800}.external-browser-heading{color:var(--ink);margin:.45rem 0 0;font-size:clamp(1.55rem,7vw,2.2rem);font-weight:850;line-height:1.35}.external-browser-description{color:var(--muted);margin:.8rem 0 1rem;font-size:clamp(1.05rem,4.8vw,1.25rem);font-weight:700}.external-browser-link{width:100%;min-height:4.25rem;font-size:clamp(1.25rem,6vw,1.65rem);text-decoration:none}.camera-frame{background:#111a15;border-radius:1rem 1rem 0 0;width:100%;height:clamp(13rem,36svh,18rem);position:relative;overflow:hidden}.camera-video,.capture-preview{object-fit:contain;background:#111a15;width:100%;height:100%}.camera-video{display:block}.camera-video.hidden{display:none}.capture-preview-wrap{width:100%;height:100%;position:relative}.ruby-overlay-layer{z-index:3;pointer-events:none;position:absolute;inset:0;overflow:hidden}.image-ruby{pointer-events:none;transform-origin:50%;margin:0;line-height:1;display:block;position:absolute}.image-ruby-base{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.image-ruby rt{box-shadow:none;color:#fffef4;font-family:BIZ UDPGothic,Noto Sans JP,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif;font-size:inherit;paint-order:stroke fill;text-align:center;text-shadow:0 .08em .18em #000000bf;-webkit-text-stroke:.08em #040f09f2;background:0 0;border:0;justify-content:center;align-items:center;padding:0;font-weight:900;line-height:1.1;display:flex;position:absolute;inset:0}.image-ruby-reading{inline-size:100%;text-align:center;white-space:nowrap;max-width:100%;max-height:100%;display:block}.image-ruby.wrapped .image-ruby-reading{overflow-wrap:anywhere;white-space:normal;word-break:break-all}.image-ruby.vertical rt{text-orientation:upright;writing-mode:vertical-rl}.image-ruby.uncertain rt{color:#ffe08a}.camera-placeholder{color:#e8f2ec;text-align:center;place-content:center;gap:.7rem;width:100%;height:100%;padding:2rem;display:grid}.camera-placeholder p{margin:0}.camera-placeholder-mark{opacity:.9;border:4px solid;border-radius:.65rem;width:4rem;height:3rem;margin:0 auto}.camera-placeholder-mark:after{content:"";border:3px solid;border-radius:50%;width:1rem;height:1rem;margin:.75rem auto;display:block}.camera-badge{z-index:4;color:#fff;background:#0a120dc7;border-radius:999px;padding:.35rem .65rem;font-size:.83rem;font-weight:700;position:absolute;top:1rem;left:.7rem}.reader-controls{gap:.6rem;padding:.65rem;display:grid}.reader-controls.two-columns{grid-template-columns:1fr 1fr}.reader-controls-note{color:var(--muted);text-align:center;grid-column:1/-1;margin:.05rem 0 0;font-size:.8rem;font-weight:700}.reader-button{cursor:pointer;border:2px solid #0000;border-radius:.8rem;justify-content:center;align-items:center;gap:.45rem;min-height:3.25rem;padding:.95rem 1rem .65rem;font-size:1.05rem;font-weight:800;line-height:1.25;display:inline-flex}.reader-button.primary{background:var(--primary);color:#fff}.reader-button.primary:hover:not(:disabled){background:var(--primary-dark)}.reader-button.secondary{border-color:var(--primary);color:var(--primary-dark);background:#fff}.reader-button.danger{background:var(--danger);color:#fff}.reader-button:disabled{cursor:not-allowed;opacity:.55}.reader-button.full-width{width:100%;margin-top:1rem}.status-box{border:1px solid var(--line);background:var(--surface);min-height:2.85rem;color:var(--ink);border-radius:.75rem;align-items:center;gap:.65rem;margin-top:.5rem;padding:.8rem .7rem .55rem;font-weight:700;display:flex}.status-box.busy,.status-box.info{background:var(--surface-soft);color:var(--primary-dark);border-color:#9fc5b1}.status-box.warning{background:var(--warning-soft);color:var(--warning);border-color:#e4c369}.status-box.error{background:var(--danger-soft);color:var(--danger);border-color:#e3a0a0}.status-spinner,.loading-spinner{border:3px solid;border-right-color:#0000;border-radius:50%;flex:none;width:1.2rem;height:1.2rem;animation:.75s linear infinite spin}.loading-card{justify-content:center;align-items:center;gap:.7rem;margin-top:2rem;display:flex}.result-card{margin-top:.55rem;padding:0;overflow:hidden}.result-details{margin:0}.result-summary{cursor:pointer;min-height:3rem;color:var(--primary-dark);justify-content:space-between;align-items:center;gap:.7rem;padding:.9rem .8rem .65rem;font-weight:800;list-style:none;display:flex}.result-summary::-webkit-details-marker{display:none}.result-summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}.result-details[open] .result-summary{border-bottom:1px solid var(--line);background:var(--surface-soft)}.result-summary-action{min-width:3.75rem;color:var(--primary);flex:none;justify-content:flex-end;align-items:center;gap:.45rem;font-size:.82rem;display:inline-flex}.result-summary-open-label{display:none}.result-summary-chevron{border-bottom:2px solid;border-right:2px solid;width:.62rem;height:.62rem;transition:transform .16s;transform:translateY(-.12rem)rotate(45deg)}.result-details[open] .result-summary-closed-label{display:none}.result-details[open] .result-summary-open-label{display:inline}.result-details[open] .result-summary-chevron{transform:translateY(.12rem)rotate(225deg)}.result-details-content{padding:.7rem .8rem}.result-lines{display:grid}.result-line-pair{gap:.18rem;padding:.5rem 0;display:grid}.result-line-pair:first-child{padding-top:0}.result-line-pair:last-child{padding-bottom:0}.result-line-pair+.result-line-pair{border-top:1px solid var(--line)}.result-original-line,.result-reading-line{overflow-wrap:anywhere;grid-template-columns:2.35rem minmax(0,1fr);align-items:start;gap:.45rem;margin:0;display:grid}.result-line-label{color:var(--muted);letter-spacing:.04em;padding-top:.2rem;font-size:.72rem;font-weight:800}.result-original-line{color:#4b5750;font-size:.92rem;line-height:1.4}.result-reading-line{color:#10291d;letter-spacing:.02em;font-size:clamp(1.65rem,7vw,2.75rem);font-weight:800;line-height:1.25}.result-reading-line .result-line-label{color:var(--primary-dark)}.result-live-reading{margin:0}.uncertain-note{color:var(--warning);margin:.55rem 0 0;font-weight:700}.quota-line{color:var(--muted);flex-wrap:wrap;gap:.4rem 1rem;margin:.55rem 0 0;font-size:.9rem;display:flex}.support-link{border:1px solid var(--line);background:var(--surface);min-height:2.75rem;color:var(--muted);border-radius:.7rem;flex:none;justify-content:center;align-items:center;padding:.65rem .75rem .35rem;font-size:.85rem;font-weight:800;line-height:1.2;text-decoration:none;display:inline-flex}.support-link:hover{border-color:var(--primary);background:var(--surface-soft);color:var(--primary-dark)}.support-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width:42rem){.site-header-inner{padding-right:max(1rem, env(safe-area-inset-right));padding-left:max(1rem, env(safe-area-inset-left))}.reader-shell{padding:1rem max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left))}.camera-frame{aspect-ratio:4/3;height:auto}.reader-controls{padding:1rem}}@media (orientation:portrait){.camera-frame.camera-frame-active{aspect-ratio:auto;height:clamp(24rem,82svh,42rem)}}@media (prefers-reduced-motion:reduce){.status-spinner,.loading-spinner{animation-duration:1.5s}}