/* Share the Japanese layout and renderer styling; adjust English text locally. */
@import url("/app/boke-simulator/style.css");

body.boke-page{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.boke-hero-title{font-size:clamp(1.5rem,4.2vw,2.5rem);line-height:1.25}
.boke-hero .hero-text{max-width:920px;line-height:1.7}
.section-head h2{font-size:clamp(20px,2.6vw,26px)}
.sensor-name{overflow-wrap:anywhere}
.sensor-tabs .mode-tab{font-size:12px}
.sensor-tabs .mode-tab small{font-size:10px}
.focal-head{align-items:flex-start;gap:10px;flex-wrap:wrap}
.focal-values{flex-wrap:wrap;gap:12px}
.distance-heading{gap:5px}
.distance-unit-note{margin:0 0 10px;font-size:11px;color:var(--text-sub)}
.distance-values{gap:10px;flex-wrap:wrap}
.distance-values>label{flex-wrap:wrap;row-gap:4px}
.distance-foot{gap:8px;flex-wrap:wrap}
.distance-foot>label{flex-wrap:wrap}
.lens-row>span small{max-width:130px;line-height:1.4}
.formula-heading{gap:10px;flex-wrap:wrap}
.formula-legend dd{font-size:12px}
.result-meta>div{flex-wrap:wrap;column-gap:8px}
.sub-field{gap:8px;flex-wrap:wrap}
@media(max-width:760px){
  .kit-nav{font-size:11px}
  .kit-nav a{padding:8px 10px}
  .boke-hero-title .highlight{box-decoration-break:clone;-webkit-box-decoration-break:clone}
  .distance-input input{width:64px}
  .distance-values>label{font-size:11px}
  .sensor-tabs .mode-tab{font-size:11px}
  .sensor-tabs .mode-tab small{font-size:9px}
  .subject-choice span{font-size:12px}
  .subject-choice small{font-size:10px}
  .controls-heading p{font-size:11px}
  .formula-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}