/* V236 FX2 lab page layout (cinematic-lab.html only). Class prefix v236f-. The effects themselves live in v236-fx2.css. */
.v236f-main{padding-bottom:20px}
.v236f-main .v233-skip{z-index:2000}

/* ---- hero with three depth layers ---- */
.v236f-hero.v233-hero{overflow:clip;isolation:isolate;margin-top:26px;padding:clamp(34px,6vw,70px) clamp(18px,4vw,48px) clamp(30px,5vw,54px);min-height:min(68vh,560px);
  border:1px solid var(--v233-line);border-radius:16px;background:linear-gradient(150deg,#0d1c27,#08131c 60%,#0b1822)}
.v236f-layer{position:absolute;inset:0;z-index:0;pointer-events:none}
.v236f-l1{inset:-24vh 0 0 0;background:
  radial-gradient(circle at 78% 46%,transparent 0 118px,rgb(223 190 133/.15) 119px 120px,transparent 121px 188px,rgb(223 190 133/.1) 189px 190px,transparent 191px 268px,rgb(223 190 133/.07) 269px 270px,transparent 271px),
  repeating-linear-gradient(0deg,transparent 0 31px,rgb(117 152 172/.09) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgb(117 152 172/.09) 31px 32px)}
.v236f-folder{position:absolute;width:min(220px,42%);aspect-ratio:7/5;border:1px solid rgb(223 190 133/.32);border-radius:10px;background:linear-gradient(160deg,rgb(22 40 54/.94),rgb(12 26 37/.94));box-shadow:0 18px 40px rgb(0 0 0/.32)}
.v236f-folder::before{content:"";position:absolute;top:-13px;left:16px;width:62px;height:14px;border:1px solid rgb(223 190 133/.32);border-bottom:0;border-radius:7px 7px 0 0;background:#152836}
.v236f-folder::after{content:"";position:absolute;left:14px;right:14px;top:26px;height:46%;background:repeating-linear-gradient(to bottom,#2b4152 0 7px,transparent 7px 18px)}
.v236f-f1{right:6%;top:14%;rotate:3deg}.v236f-f2{right:20%;top:42%;rotate:-4deg}
.v236f-tag{position:absolute;padding:5px 12px 5px 22px;border:1px solid rgb(150 216 220/.5);border-radius:4px;background:rgb(7 17 27/.88);color:#96d8dc;font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;white-space:nowrap}
.v236f-tag::before{content:"";position:absolute;left:7px;top:50%;width:7px;height:7px;margin-top:-4px;border:1px solid currentColor;border-radius:50%}
.v236f-t1{right:30%;top:12%;rotate:-5deg}.v236f-t2{right:8%;top:62%;rotate:4deg}.v236f-t3{right:3%;top:36%;rotate:-2deg}
.v236f-copy{position:relative;z-index:2;max-width:660px}
.v236f-copy h1{margin:14px 0 16px}
.v236f-copy p{max-width:56ch}
.v236f-hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:22px 0 0}
.v236f-hero-note{position:relative;z-index:2;margin:18px 0 0;padding:12px 15px;max-width:660px;border-left:3px solid var(--v233-gold);background:rgb(20 39 51/.92);color:#d2e2ed;font-size:14px;overflow-wrap:anywhere}

/* ---- readout ---- */
.v236f-envcard{margin-top:26px}
.v236f-env{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:14px 0 0;padding:0;font-size:14px}
.v236f-env div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--v233-line)}
.v236f-env dt{color:#cfe0eb}.v236f-env dd{margin:0;font:600 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:right;color:#aabcc9}
.v236f-env dd[data-ok="1"]{color:#7fd1ae}.v236f-env dd[data-ok="0"]{color:#f0b45a}

/* ---- specimen blocks ---- */
.v236f-spec{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:22px 30px;align-items:start;margin:68px 0 0}
.v236f-spec>*{min-width:0}
.v236f-spec>h2{grid-column:1/-1;margin:0;font-size:clamp(22px,2.7vw,30px);line-height:1.45}
.v236f-spec.v236f-flip .v236f-stage{order:2}
.v236f-code{display:inline-block;margin-left:12px;padding:1px 9px;border:1px solid var(--v233-line);border-radius:6px;color:var(--v233-gold);font:600 13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;vertical-align:middle;white-space:nowrap}
.v236f-stage{min-height:300px;padding:clamp(22px,3vw,36px);border:1px solid var(--v233-line);border-radius:14px;background:radial-gradient(circle at 1px 1px,rgb(117 152 172/.16) 1px,transparent 1.5px) 0 0/22px 22px,#0a1a25}
.v236f-sheet{padding:4px 2px}
.v236f-dl{margin:0}
.v236f-dl dt{margin-top:16px;color:var(--v233-gold);font-size:13px;font-weight:700}.v236f-dl dt:first-child{margin-top:0}
.v236f-dl dd{margin:5px 0 0;color:#cfe0eb;font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.v236f-dl code,.v236f-guide code{font:600 12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e9c781;overflow-wrap:anywhere}

/* demos */
.v236f-memos{display:grid;gap:14px}
.v236f-memo{padding:16px 18px;border:1px solid var(--v233-line);border-radius:10px;background:#0c1c27}
.v236f-memo b{display:block;color:var(--v233-gold);font-size:15px}.v236f-memo p{margin:6px 0 0;color:#b9cbd7;font-size:14px}
.v236f-photo{margin:0;border:1px solid var(--v233-line);border-radius:12px;overflow:hidden;background:#09151e}
.v236f-photo svg{display:block;width:calc(50% + 50%);height:auto}
.v236f-photo figcaption{padding:10px 14px;color:#a6bdcd;font-size:13px;border-top:1px solid var(--v233-line)}
.v236f-paper{padding:26px 28px;border:1px solid var(--v233-line);border-radius:6px;background:#0d1b26;box-shadow:6px 8px 0 rgb(0 0 0/.22)}
.v236f-paper h3{margin:0 0 14px;font-size:20px;line-height:1.75;color:#f0e6d4;font-family:"Noto Serif TC",ui-serif,serif}
.v236f-paper p{margin:0 0 12px;color:#d3e0e8;font-size:15px;line-height:1.9}
.v236f-paper p:last-child{margin-bottom:0}
.v236f-cards{display:grid;gap:34px}
.v236f-tile{padding:22px 20px 18px;border:1px solid var(--v233-line);border-radius:10px;background:#0c1c27}
.v236f-tile h3{margin:0 0 6px;font-size:16px;color:#e8edf0}.v236f-tile p{margin:0;color:#aabcc9;font-size:13.5px}
.v236f-scancard{padding:20px 22px;border:1px solid var(--v233-line);border-radius:12px;background:linear-gradient(135deg,#10202c,#0d1c26)}
.v236f-scancard h3{margin:0 0 10px;font-size:17px}
.v236f-scancard ul{margin:0;padding:0;list-style:none;font-size:14px}
.v236f-scancard li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--v233-line);color:#cfe0eb}
.v236f-scancard li span:last-child{font:600 12.5px/1.7 ui-monospace,monospace;color:#8ccbc6}
.v236f-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v236f-stat{padding:18px 18px 16px;border:1px solid var(--v233-line);border-radius:10px;background:#0c1c27}
.v236f-stat b{display:inline-block;font:700 clamp(36px,5vw,54px)/1.15 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;color:var(--v233-gold)}
.v236f-stat span{display:block;margin-top:2px;color:#b9cbd7;font-size:14px}
.v236f-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.v236f-steps li{min-height:96px;padding:14px;border:1px solid var(--v233-line);border-radius:10px;background:#0c1c27;color:#cfe0eb;font-size:14px}
.v236f-steps b{display:block;margin-bottom:4px;color:var(--v233-gold);font:600 12px/1.6 ui-monospace,monospace}
.v236f-stack{position:relative;height:210px;margin:6px 0 18px}
.v236f-stack i{position:absolute;display:block;width:62%;height:96px;padding:10px 14px;border:1px solid rgb(223 190 133/.4);border-radius:10px;background:rgb(16 32 44/.92);color:#e5bf82;font:600 13px/1.5 ui-monospace,monospace;font-style:normal}
.v236f-stack i:nth-child(1){left:0;top:0;opacity:.7}.v236f-stack i:nth-child(2){left:16%;top:42px;opacity:.85}.v236f-stack i:nth-child(3){left:32%;top:84px}
.v236f-launches{display:grid;gap:12px}
.v236f-launch{display:block;padding:16px 18px;border:1px solid var(--v233-line);border-radius:10px;background:#0c1c27;color:inherit;text-decoration:none;min-height:44px}
.v236f-launch:hover{border-color:var(--v233-gold)}
.v236f-launch h3{margin:0;font-size:17px;color:#e8edf0}.v236f-launch p{margin:5px 0 0;color:#aabcc9;font-size:13.5px}
.v236f-pre{margin:12px 0 0;padding:12px 14px;border:1px solid var(--v233-line);border-radius:8px;background:#091824;color:#d6e4ee;font:12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---- measured table and guide ---- */
.v236f-perf{margin:68px 0 0}
.v236f-perf h2,.v236f-guide h2{margin:0 0 14px;font-size:clamp(22px,2.7vw,30px);line-height:1.45}
ul.v236f-why{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.v236f-why li{padding:14px 16px;border:1px solid var(--v233-line);border-radius:10px;background:#0b1b26;color:#cfe0eb;font-size:14.5px;line-height:1.8}
.v236f-why b{color:var(--v233-gold)}
.v236f-guide{margin:68px 0 0}
.v236f-guide section{margin:26px 0 0;padding:18px 20px;border:1px solid var(--v233-line);border-radius:12px;background:#0b1b26}
.v236f-guide h3{margin:0 0 8px;font-size:17px;color:var(--v233-gold)}
.v236f-guide ul,.v236f-guide ol{margin:8px 0 0;padding-left:22px;color:#cfe0eb;font-size:14.5px;line-height:1.85}
.v236f-guide li{margin:6px 0;overflow-wrap:anywhere}
.v236f-guide p{margin:8px 0 0;color:#cfe0eb;font-size:14.5px;line-height:1.85}
.v236f-note{margin:12px 0 0;font-size:12.5px;color:#a6bdcd}

@media(max-width:860px){
  .v236f-spec{grid-template-columns:minmax(0,1fr);margin-top:52px}
  .v236f-spec.v236f-flip .v236f-stage{order:0}
  .v236f-env{grid-template-columns:minmax(0,1fr)}
  .v236f-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v236f-layer{opacity:.5}
  .v236f-code{display:block;margin:6px 0 0}
}
@media(max-width:640px){
  /* the text column fills the hero here: keep the decoration quiet and out of the lines of text */
  .v236f-l2{opacity:.28}
  .v236f-t1,.v236f-t3{display:none}
  .v236f-t2{right:5%}
}
@media(max-width:480px){.v236f-stats{grid-template-columns:minmax(0,1fr)}.v236f-stage{padding:22px 16px}.v236f-paper{padding:20px 18px}}
@media print{.v236f-layer{display:none}.v236f-hero.v233-hero{border:0;background:none}}