@font-face { font-family:"CRI Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/DejaVuSansMono.ttf") format("truetype"); }
@font-face { font-family:"CRI Mono"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/cri-mono-bold-latin.woff") format("woff"); }
.aoi-visual{position:relative;isolation:isolate;color:#f3f8f5;text-decoration:none;--aoi:#e72db2;--mono:'CRI Mono',monospace;}
.aoi-image-wrap{position:relative;overflow:hidden;border-radius:38px 10px 32px 10px;background:#123a3d;line-height:0;}
html body .aoi-image-wrap>img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none;}
.aoi-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.aoi-boundary,.aoi-halo{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.aoi-halo{stroke:#172e3999;stroke-width:4.2;}
.aoi-boundary{stroke:var(--aoi);stroke-width:2.2;}
.aoi-connectors{fill:none;stroke:#f2f7ef;stroke-width:1;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 2px #0c172c);}
.aoi-connectors path{vector-effect:non-scaling-stroke;}
.aoi-connectors circle{fill:#f1e5ed;stroke:#bd278e;stroke-width:2;}
.aoi-label,.aoi-context{position:absolute;font:10px/1.3 var(--mono);letter-spacing:.035em;line-height:1.3;}
.aoi-label{top:3.8%;left:3.2%;padding:8px 10px;border:1px solid #ffffff5c;background:#142f35df;border-radius:4px;color:#fff;display:flex;gap:7px;align-items:center;}
.aoi-label i{width:13px;height:2px;background:var(--aoi)}
.aoi-context{bottom:3.3%;left:3.2%;padding:6px 8px;color:#fff;background:#112e31c9;border-radius:3px;letter-spacing:.07em;font-size:9px;}
.hud-card{position:absolute;right:2.4%;width:24.1%;box-sizing:border-box;padding:13px 12px 14px;background:#102e35dd;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1px solid #dbece79c;border-radius:5px;color:#f7fbf8;box-shadow:0 5px 16px #001b2933;font-family:var(--mono);text-align:left;}
.hud-source{top:7.2%;border-top:2px solid #e72db2;}
.hud-review{bottom:10.3%;border-top:2px solid #acdcd0;}
.hud-index{display:block;font-size:10px;line-height:1.4;letter-spacing:.08em;color:#cbdcd8;white-space:nowrap;}
.hud-value{display:block;font-size:15px;line-height:1.5;margin:9px 0 4px;font-weight:400;letter-spacing:-.04em;}
.hud-caption{display:block;font-family:Inter,sans-serif;font-size:11px;line-height:1.55;color:#d5e4dd;}
.hud-review .hud-value{font-family:Inter,sans-serif;font-weight:700;font-size:13px;letter-spacing:-.02em;}
[data-variant="a"] .connector-b,[data-variant="b"] .connector-a{display:none;}
.hud-record{top:7.2%;right:2.4%;width:26.1%;padding:0;border-radius:5px;}
.hud-record-title{display:flex;align-items:center;gap:7px;padding:12px 10px;border-bottom:1px solid #c8e1d82b;font-size:9px;letter-spacing:.03em;white-space:nowrap;}
.hud-square{width:7px;height:7px;border:1px solid var(--aoi);}
.hud-record-title small{margin-left:auto;color:#b5cec5;font-size:8px;}
.hud-row{padding:12px 12px 11px;border-bottom:1px solid #c8e1d82b;}
.hud-row>span{display:block;font-size:8px;letter-spacing:.09em;color:#c6dcd5;line-height:1.4;}
.hud-row>strong{display:block;font-weight:400;font-size:12px;line-height:1.5;margin-top:5px;}
.hud-next{background:#8cc9ba12;border-bottom:0;}
.hud-next>strong{font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:-.025em;}
.hud-next b{float:right;color:#cce6de;font-weight:400;}
.aoi-visual.is-revealing .aoi-boundary{animation:trace 1.15s cubic-bezier(.4,0,.2,1) both;}
.aoi-visual.is-revealing .aoi-halo{animation:appear .8s .15s both;}
.aoi-visual.is-revealing .aoi-connectors{animation:appear .5s .85s both;}
.aoi-visual.is-revealing .hud-source,.aoi-visual.is-revealing .hud-record{animation:panel .65s 1.05s both;}
.aoi-visual.is-revealing .hud-review{animation:panel .65s 1.45s both;}
@keyframes trace{from{stroke-dasharray:100;stroke-dashoffset:100;opacity:.1}to{stroke-dasharray:100;stroke-dashoffset:0;opacity:1}}
@keyframes appear{from{opacity:0}to{opacity:1}}
@keyframes panel{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:761px) and (max-width:1120px){.hud-card{padding:10px 8px}.hud-index{font-size:7px}.hud-value{font-size:11px}.hud-review .hud-value{font-size:10px}.hud-caption{font-size:8px}.hud-record{padding:0}.hud-record-title{font-size:7px;padding:9px 7px}.hud-row{padding:8px}.hud-row>span{font-size:7px}.hud-row>strong{font-size:10px}.aoi-label{font-size:8px}.aoi-context{font-size:7px}}
@media(max-width:760px){
 .aoi-visual{border-radius:25px 8px 20px 8px;overflow:hidden;background:#19383c;}
 .aoi-image-wrap{border-radius:0;}
 .aoi-image-wrap>img{box-shadow:none!important;}
 .aoi-lines .aoi-connectors{display:none;}
 .aoi-boundary{stroke-width:1.8;}.aoi-halo{stroke-width:3.5;}
 .aoi-label{font-size:9px;padding:6px 8px;}.aoi-context{font-size:7px;padding:5px 7px;}
 .hud-panels{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:14px 0;background:#15373a;}
 .hud-card{position:static;width:auto;border:0;border-radius:0;padding:0 13px;background:none;box-shadow:none;backdrop-filter:none;}
 .hud-card+.hud-card{border-left:1px solid #d5e7de40;}
 .hud-index{font-size:9px;letter-spacing:.03em;}.hud-value{font-size:14px;margin:6px 0 3px;}.hud-review .hud-value{font-size:13px;}.hud-caption{font-size:11px;}
 [data-variant="b"] .hud-panels{display:block;padding:0;}
 .hud-record{padding:0;display:block;}
 .hud-record-title{grid-column:1/-1;padding:10px 13px;font-size:9px;}
 .hud-row{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid #d5e7de2b;}.hud-row>span{font-size:8px;}.hud-row>strong{font-size:12px;margin:0;}.hud-row br{display:none;}.hud-next>strong{font-size:12px;}.hud-next b{display:none;}
}
@media(prefers-reduced-motion:reduce){.aoi-visual.is-revealing .aoi-boundary,.aoi-visual.is-revealing .aoi-halo,.aoi-visual.is-revealing .aoi-connectors,.aoi-visual.is-revealing .hud-card{animation:none!important;}}

/* B2: airy ice-blue glass; source photo and review content remain unchanged. */
.aoi-visual { --aoi:#36c7ff; color:#0c3655; }
.aoi-boundary { stroke-width:1.8; }
.aoi-halo { stroke:#f1fcffb3; stroke-width:3.2; }
.aoi-connectors { stroke:#a7e4ff; stroke-width:1; filter:drop-shadow(0 1px 2px #0c365538); }
.aoi-connectors circle { fill:#f4fcff; stroke:#1da7ee; stroke-width:1.5; }
.aoi-label { border:0; border-radius:3px; padding:7px 9px; color:#0b4a75; background:#eafbffc2; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); font-size:10px; }
.aoi-label i { background:#179cde; }
.aoi-context { border:0; border-radius:3px; background:#effbffad; color:#164f78; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); font-size:9px; }
.hud-record { top:7.2%; right:2.4%; width:26.1%; overflow:hidden; border:0; border-radius:7px; color:#113b59; background:linear-gradient(130deg,rgba(241,252,255,.76),rgba(199,235,255,.51)); backdrop-filter:blur(7px) saturate(1.16) brightness(1.05); -webkit-backdrop-filter:blur(7px) saturate(1.16) brightness(1.05); box-shadow:0 9px 24px #164f761a; }
.hud-record-title { padding:13px 12px; border:0; font-size:9px; letter-spacing:.045em; color:#126196; background:#92d9ff29; }
.hud-record-title small { color:#2878a4; }
.hud-square { width:6px; height:6px; border:0; border-radius:1px; background:#20a9ee; box-shadow:0 0 0 3px #c7efff77; }
.hud-row { padding:13px 13px 12px; border:0; }
.hud-row>span { font-size:8px; color:#27668e; letter-spacing:.095em; }
.hud-row>strong { margin-top:7px; font-size:13px; font-weight:400; color:#123753; line-height:1.55; text-shadow:0 1px 1px #ffffff73; }
.hud-row:nth-child(3) { background:rgba(255,255,255,.48); }
.hud-next { border:0; background:#5bc7ff1c; }
.hud-next>strong { font-family:Inter,sans-serif; font-weight:700; font-size:13px; letter-spacing:-.025em; color:#084c7b; }
.hud-next b { color:#058fd5; }
@media(min-width:761px) and (max-width:1120px) {
 .hud-record-title{font-size:8px;padding:10px 9px;gap:5px;}
 .hud-row{padding:10px;}.hud-row>span{font-size:7px;}.hud-row>strong{font-size:11px;}
 .aoi-label{font-size:8px;}.aoi-context{font-size:7px;}
}
@media(max-width:760px) {
 .aoi-visual { background:#eefaff; }
 .hud-panels { background:transparent; }
 .hud-record { width:auto; border:0; border-radius:0; background:linear-gradient(130deg,#f4fcff,#dff4ff); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
 .hud-record-title { padding:12px 13px; background:#93daff26; font-size:10px; }
 .hud-row { padding:12px 13px; grid-template-columns:104px 1fr; border:0; }
 .hud-row>span { font-size:8px; }.hud-row>strong { font-size:13px; margin:0; }
 .hud-next>strong { font-size:13px; }
 .aoi-label { font-size:9px; }.aoi-context { font-size:8px; }
 .aoi-boundary { stroke-width:1.7; }.aoi-halo { stroke-width:2.8; }
}

/* B3: one readable size and a genuine bold face for every small overlay label. */
.aoi-label,
.aoi-context,
.hud-record-title,
.hud-record-title small,
.hud-row>span {
  font-family:'CRI Mono',monospace;
  font-size:11px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:.025em;
}
.hud-record-title { gap:6px; }
.hud-record-title small { margin-left:auto; }
.hud-row>span { color:#205d84; }
@media(max-width:1120px) {
  .aoi-visual { overflow:hidden; border-radius:25px 8px 20px 8px; background:#eefaff; }
  .aoi-image-wrap { border-radius:0; }
  .aoi-lines .aoi-connectors { display:none; }
  .hud-panels { display:block; padding:0; background:transparent; }
  .hud-record { position:static; width:auto; border:0; border-radius:0; padding:0; background:linear-gradient(130deg,#f4fcff,#dff4ff); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .hud-record-title { padding:12px 13px; }
  .hud-row { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:10px; padding:12px 13px; }
  .hud-row>strong { margin:0; font-size:13px; }
  .hud-row br { display:none; }
  .hud-next b { display:none; }
}