/* V2: the video library and the live room (student side and the Control Room tab) */
.v2-wrap { max-width: 1040px; margin: 0 auto; padding: 0 4px 56px; }
.v2-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.v2-tab { background: none; border: 1px solid var(--hairline-strong); color: var(--gray); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.v2-tab.on { color: var(--gold-soft, var(--gold)); border-color: rgba(var(--gold-rgb),0.6); background: rgba(var(--gold-rgb),0.08); }
.v2-tab i { font-style: normal; font-size: 10px; letter-spacing: 1px; font-weight: 700; color: #171108; background: #6FD69A; border-radius: 999px; padding: 2px 8px; margin-left: 8px; }
.v2-note { background: rgba(var(--gold-rgb),0.08); border: 1px solid rgba(var(--gold-rgb),0.35); color: var(--gold-soft, var(--gold)); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; margin: 0 0 16px; }
.v2-bar { height: 8px; border-radius: 999px; background: rgba(var(--ink-rgb),0.08); overflow: hidden; }
.v2-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); border-radius: 999px; transition: width .4s; }
.v2-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; background: var(--panel-solid); border: 1px solid var(--hairline-strong); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.v2-hero > div { flex: 1; min-width: 220px; }
.v2-hero h3 { font: 600 19px/1.3 'Fraunces', serif; margin: 2px 0 8px; }
.v2-eyebrow { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel); }
.v2-mod { background: var(--panel-solid); border: 1px solid var(--hairline-strong); border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.v2-mod-head { padding: 16px 20px 12px; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.v2-mod-head h2 { font: 600 20px/1.3 'Fraunces', serif; margin: 0; }
.v2-mod-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--gray); line-height: 1.6; }
.v2-mod-meta { font-size: 12.5px; color: var(--steel); white-space: nowrap; }
.v2-lessons { border-top: 1px solid var(--hairline); }
.v2-lesson { display: flex; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--hairline); cursor: pointer; }
.v2-lesson:first-child { border-top: 0; }
.v2-lesson:hover { background: rgba(var(--ink-rgb),0.03); }
.v2-lesson.locked { cursor: default; opacity: .6; }
.v2-lesson.locked:hover { background: none; }
.v2-thumb { width: 96px; height: 54px; border-radius: 8px; background: linear-gradient(160deg, rgba(var(--gold-rgb),0.16), rgba(var(--ink-rgb),0.03)); object-fit: cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--gold-soft, var(--gold)); }
.v2-l-main { flex: 1; min-width: 0; }
.v2-l-title { font-size: 15px; color: var(--white, #fff); }
.v2-l-sub { font-size: 12.5px; color: var(--steel); margin-top: 3px; }
.v2-state { font-size: 12px; white-space: nowrap; color: var(--steel); }
.v2-state.done { color: #6FD69A; }
.v2-chip { font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 2px 9px; color: var(--gold-soft, var(--gold)); margin-left: 8px; }
.v2-player { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.v2-player video, .v2-player iframe { width: 100%; height: 100%; display: block; border: 0; background: #000; }
.v2-player:fullscreen { border-radius: 0; aspect-ratio: auto; }
.v2-wm { position: absolute; pointer-events: none; font-size: 12px; color: rgba(var(--ink-rgb),0.22); text-shadow: 0 0 2px rgba(0,0,0,0.6); transition: top 2s ease-in-out, left 2s ease-in-out; white-space: nowrap; z-index: 3; user-select: none; }
.v2-fs { position: absolute; right: 10px; top: 10px; z-index: 4; background: rgba(0,0,0,0.55); border: 1px solid rgba(var(--ink-rgb),0.25); color: #fff; border-radius: 8px; padding: 5px 10px; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .2s; }
.v2-player:hover .v2-fs { opacity: 1; }
.v2-noplay { display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--steel); height: 100%; font-size: 14.5px; }
.v2-lbody { margin-top: 18px; }
.v2-lbody h2 { font: 600 24px/1.3 'Fraunces', serif; margin: 4px 0 8px; }
.v2-desc p, .v2-notes p { margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: var(--gray); }
.v2-notes { background: rgba(var(--ink-rgb),0.03); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 18px 6px; margin: 16px 0; }
.v2-notes h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel); font-weight: 600; }
.v2-res { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.v2-res a { font-size: 13px; border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 7px 14px; color: var(--gold-soft, var(--gold)); text-decoration: none; }
.v2-navrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; align-items: center; }
.v2-live { background: var(--panel-solid); border: 1px solid var(--hairline-strong); border-radius: 14px; padding: 18px 22px; margin-bottom: 14px; display: flex; gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.v2-live.now { border-color: rgba(111,214,154,0.6); box-shadow: 0 0 0 1px rgba(111,214,154,0.15) inset; }
.v2-live h3 { font: 600 19px/1.3 'Fraunces', serif; margin: 0 0 4px; }
.v2-live .v2-when { font-size: 13.5px; color: var(--gold-soft, var(--gold)); margin-bottom: 6px; }
.v2-live p { margin: 0; font-size: 14px; color: var(--gray); line-height: 1.6; max-width: 560px; }
.v2-livedot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #6FD69A; margin-right: 7px; box-shadow: 0 0 0 0 rgba(111,214,154,0.6); animation: v2pulse 1.6s infinite; }
@keyframes v2pulse { 70% { box-shadow: 0 0 0 9px rgba(111,214,154,0); } 100% { box-shadow: 0 0 0 0 rgba(111,214,154,0); } }
/* Control Room side */
.v2-form { border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 14px 16px; margin: 12px 0; background: rgba(var(--ink-rgb),0.02); }
.v2-form label { display: block; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--steel); margin: 10px 0 4px; }
.v2-form input[type=text], .v2-form input[type=url], .v2-form input[type=number], .v2-form input[type=datetime-local], .v2-form select, .v2-form textarea { width: 100%; box-sizing: border-box; background: rgba(var(--ink-rgb),0.04); border: 1px solid var(--hairline-strong); border-radius: 8px; color: var(--white, #fff); padding: 9px 11px; font: inherit; font-size: 14px; }
.v2-form textarea { min-height: 84px; resize: vertical; }
.v2-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .v2-2 { grid-template-columns: 1fr; } .v2-thumb { width: 72px; height: 42px; } .v2-lesson { padding: 12px 14px; } }
.v2-amod { border: 1px solid var(--hairline-strong); border-radius: 12px; margin: 12px 0; overflow: hidden; }
.v2-amod-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; background: rgba(var(--ink-rgb),0.03); }
.v2-alesson { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--hairline); }
.v2-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-btns button { font-size: 12.5px; padding: 6px 12px; }
.v2-up { margin-top: 8px; }
.v2-up .v2-bar { margin-top: 8px; }
.v2-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.v2-table th, .v2-table td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--hairline); }
.v2-table th { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--steel); border-top: 0; font-weight: 600; }

/* The room: video cards, picture grid, search and filters, the section header, and the picture viewer */
.v2-tab { min-height: 40px; }
.v2-tabn { font-size: 11px; margin-left: 8px; opacity: .7; }
.v2-prog { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--steel); margin: 0 0 6px; }
.v2-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.v2-search { flex: 1 1 220px; min-width: 0; box-sizing: border-box; background: rgba(var(--ink-rgb),0.04); border: 1px solid var(--hairline-strong); border-radius: 999px; color: var(--white, #fff); padding: 10px 16px; font: inherit; font-size: 14px; }
.v2-search:focus { outline: none; border-color: var(--gold); }
.v2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-chipbtn { background: none; border: 1px solid var(--hairline-strong); color: var(--gray); border-radius: 999px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
.v2-chipbtn small { opacity: .65; margin-left: 4px; font-size: 11px; }
.v2-chipbtn.on { color: var(--gold-soft, var(--gold)); border-color: rgba(var(--gold-rgb),0.6); background: rgba(var(--gold-rgb),0.08); }
.v2-lessons { padding: 4px 18px 14px; }
.v2-group { display: flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel); margin: 14px 0 10px; }
.v2-group span { border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 1px 9px; letter-spacing: 0; }
.v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.v2-card { cursor: pointer; border-radius: 12px; outline: none; }
.v2-card.locked { cursor: default; opacity: .6; }
.v2-card:focus-visible .v2-cthumb, .v2-pcard:focus-visible .v2-pthumb { box-shadow: 0 0 0 2px var(--gold); }
.v2-cthumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, rgba(var(--gold-rgb),0.18), rgba(var(--ink-rgb),0.04)); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.v2-card:not(.locked):hover .v2-cthumb { transform: translateY(-2px); border-color: rgba(var(--gold-rgb),0.5); }
.v2-cthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-cicon { font-size: 28px; color: var(--gold-soft, var(--gold)); }
.v2-cdur { position: absolute; right: 8px; bottom: 8px; font-size: 11.5px; background: rgba(0,0,0,0.7); color: #fff; border-radius: 6px; padding: 2px 7px; }
.v2-cbadge { position: absolute; left: 8px; top: 8px; font-size: 11.5px; background: rgba(0,0,0,0.7); color: #fff; border-radius: 6px; padding: 2px 8px; }
.v2-cbadge.done { color: #6FD69A; }
.v2-cbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; background: rgba(0,0,0,0.45); }
.v2-ctitle { font-size: 14.5px; line-height: 1.4; color: var(--white, #fff); margin: 9px 2px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-cmeta { font-size: 12px; color: var(--steel); margin: 0 2px; }
.v2-cmeta .v2-chip { margin-left: 6px; }
.v2-sechead h2 { font: 600 24px/1.3 'Fraunces', serif; margin: 4px 0 4px; }
.v2-sechead p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.7; color: var(--gray); max-width: 680px; }
.v2-subhead { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel); font-weight: 600; margin: 24px 0 10px; }
.v2-lockcard { text-align: center; padding: 34px 20px; margin-top: 16px; }
.v2-lockic { font-size: 34px; margin-bottom: 8px; }
.v2-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.v2-pcard { cursor: pointer; outline: none; }
.v2-pcard.locked { cursor: default; opacity: .6; }
.v2-pthumb { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #0d1015; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.v2-pcard:not(.locked):hover .v2-pthumb { transform: translateY(-2px); border-color: rgba(var(--gold-rgb),0.5); }
.v2-pthumb img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.v2-ptitle { font-size: 14px; line-height: 1.4; color: var(--white, #fff); margin: 8px 2px 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v2-psub { font-size: 12px; color: var(--steel); margin: 0 2px; }
.v2-vnote { font-size: 12px; color: var(--steel); text-align: center; margin: 20px 0 0; }
.v2-vw { position: fixed; inset: 0; z-index: 10000; background: #06080c; display: flex; flex-direction: column; color: #fff; user-select: none; }
.v2-vw-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.v2-vw-t { min-width: 0; display: flex; flex-direction: column; }
.v2-vw-t strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-vw-t span { font-size: 12px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-vw-btns { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.v2-vw-btns button { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 8px; min-width: 38px; height: 38px; padding: 0 10px; font-size: 16px; cursor: pointer; font-family: inherit; }
.v2-vw-btns span { font-size: 12px; min-width: 42px; text-align: center; opacity: .8; }
.v2-vw-stage { flex: 1; min-height: 0; display: flex; align-items: stretch; position: relative; }
.v2-vw-scroll { flex: 1; min-width: 0; overflow: auto; display: flex; padding: 12px; }
.v2-vw-scroll img { margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; background: #fff0; }
.v2-vw-scroll img.zoomed { max-width: none; max-height: none; flex: none; }
.v2-vw-nav { background: none; border: 0; color: #fff; font-size: 38px; width: 52px; cursor: pointer; opacity: .65; flex-shrink: 0; }
.v2-vw-nav:hover { opacity: 1; background: rgba(255,255,255,0.05); }
.v2-vw-cap { padding: 10px 18px 16px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.85); max-height: 22vh; overflow: auto; border-top: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 640px) {
  .v2-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; width: 100%; padding-bottom: 2px; }
  .v2-chipbtn { white-space: nowrap; flex-shrink: 0; }
  .v2-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .v2-pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .v2-lessons { padding: 2px 12px 12px; }
  .v2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .v2-tab { white-space: nowrap; flex-shrink: 0; }
  .v2-vw-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 64px; font-size: 30px; background: rgba(0,0,0,0.35); }
  .v2-vw-nav.prev { left: 0; } .v2-vw-nav.next { right: 0; }
  .v2-vw-btns span { display: none; }
}

/* ---- The luxe look, second pass: one cinematic stage, a chessboard floor, image-first cards in rows, editorial sections ----
   Crimson velvet and champagne metal. Everything is scoped under .v2-wrap so the Chamber and other rooms are untouched. */
.v2-wrap {
  --base: #0B0508; --base2: #150A0F; --acc: #A31621; --acc-hi: #D42A36; --acc-deep: #6E0E16; --metal: #E8D3A6; --metal-soft: #F6E8CB; --metal-deep: #B9945B; --text: #FBF4E8;
  --base-rgb: 11,5,8; --base2-rgb: 21,10,15; --acc-rgb: 163,22,33; --acc-hi-rgb: 212,42,54; --acc-deep-rgb: 110,14,22; --metal-rgb: 232,211,166; --metal-soft-rgb: 246,232,203; --text-rgb: 251,244,232; --board: 1; --glow: 1; --v2-gut: clamp(20px, 4vw, 72px);
  --white: var(--text); --gray: rgba(var(--text-rgb),0.74); --steel: rgba(var(--text-rgb),0.55); --gold: var(--metal); --gold-soft: var(--metal-soft); --gold-rgb: var(--metal-rgb); --ink-rgb: 255,255,255;
  --hairline: rgba(var(--metal-rgb),0.14); --hairline-strong: rgba(var(--metal-rgb),0.32); --panel-solid: var(--base2);
  --velvet: var(--base); --velvet-2: var(--base2); --crimson: var(--acc); --crimson-hi: var(--acc-hi); --champ: var(--metal); --champ-soft: var(--metal-soft); --champ-deep: var(--metal-deep);
  --leaf: linear-gradient(100deg, var(--metal-soft) 0%, var(--metal) 34%, var(--metal-deep) 64%, var(--metal-soft) 100%);
  --serif: 'Fraunces', Georgia, serif;
  position: relative; max-width: 1240px; margin: 4px auto 48px; padding: 0 0 56px; color: var(--white); border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(1100px 520px at 12% 0%, rgba(var(--acc-rgb),0.22), transparent 70%), radial-gradient(900px 600px at 100% 100%, rgba(var(--acc-rgb),0.12), transparent 70%), var(--base);
  border: 1px solid rgba(var(--metal-rgb),0.22); box-shadow: 0 50px 100px -50px rgba(0,0,0,1), inset 0 1px 0 rgba(var(--metal-soft-rgb),0.18);
}
.v2-wrap > *:not(.v2-top) { margin-left: var(--v2-gut); margin-right: var(--v2-gut); }
/* the banner: title over a chessboard floor receding into the dark, a knight standing in the glow */
.v2-top { position: relative; min-height: clamp(330px, 36vw, 430px); display: flex; align-items: flex-end; padding: 0 var(--v2-gut) 40px; margin-bottom: 34px; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.v2-floor { opacity: var(--board); position: absolute; left: -60%; right: -60%; bottom: 0; height: 130%; z-index: 0; pointer-events: none;
  background: conic-gradient(rgba(var(--metal-rgb),0.24) 25%, rgba(var(--acc-deep-rgb),0.46) 0 50%, rgba(var(--metal-rgb),0.24) 0 75%, rgba(var(--acc-deep-rgb),0.46) 0) 0 0 / 140px 140px;
  transform: perspective(430px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.9) 40%, transparent 92%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.9) 40%, transparent 92%); }
.v2-top::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(700px 320px at 78% 78%, rgba(var(--acc-hi-rgb),0.3), transparent 70%), linear-gradient(90deg, rgba(var(--base-rgb),0.88) 0%, rgba(var(--base-rgb),0.6) 42%, rgba(var(--base-rgb),0) 72%), linear-gradient(180deg, rgba(var(--base-rgb),0) 55%, rgba(var(--base-rgb),0.5) 100%); }
.v2-piece { opacity: var(--pieceo); position: absolute; z-index: 1; right: 7%; bottom: -34px; font: 400 clamp(220px, 30vw, 400px)/1 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', var(--serif); color: rgba(var(--metal-soft-rgb),0.16); text-shadow: 0 0 60px rgba(var(--acc-hi-rgb),0.45); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 38%); mask-image: linear-gradient(to top, transparent 0, #000 38%); }
.v2-top-in { position: relative; z-index: 2; max-width: 680px; }
.v2-kicker { display: inline-block; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 4px; text-transform: uppercase; color: var(--metal); }
.v2-top h1 { margin: 14px 0 14px; font: 500 clamp(38px, 6vw, 70px)/1.04 var(--serif); letter-spacing: .5px; background: var(--leaf); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.v2-top p { margin: 0; color: var(--gray); font-size: 16px; line-height: 1.6; max-width: 520px; }
.v2-rule { display: block; width: 140px; height: 1px; margin-top: 24px; background: linear-gradient(90deg, var(--acc-hi), var(--metal), transparent); }
.v2-wrap .v2-note { background: linear-gradient(90deg, rgba(var(--acc-rgb),0.28), rgba(var(--acc-rgb),0.06)); border: 1px solid rgba(var(--acc-hi-rgb),0.45); border-radius: 12px; color: var(--metal-soft); }
/* tabs: quiet type with a metal underline */
.v2-wrap .v2-tabs { gap: 34px; margin-bottom: 30px; padding: 0; border-bottom: 1px solid var(--hairline); }
.v2-wrap .v2-tab { position: relative; background: none; border: 0; border-radius: 0; padding: 14px 0 15px; min-height: 0; color: var(--steel); font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; transition: color .25s; }
.v2-wrap .v2-tab:hover { color: var(--metal-soft); background: none; }
.v2-wrap .v2-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--acc-hi), var(--metal)); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 14px rgba(var(--acc-hi-rgb),0.8); }
.v2-wrap .v2-tab.on { color: var(--metal-soft); background: none; box-shadow: none; font-weight: 600; }
.v2-wrap .v2-tab.on::after { transform: scaleX(1); }
.v2-wrap .v2-tabn { margin-left: 8px; font-size: 10.5px; letter-spacing: 1px; opacity: .6; }
/* search and filters */
.v2-wrap .v2-toolbar { margin-bottom: 8px; gap: 22px; }
.v2-wrap .v2-search { background: transparent; border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0; padding: 10px 2px; box-shadow: none; font-size: 15px; color: var(--white); }
.v2-wrap .v2-search::placeholder { color: var(--steel); font-style: italic; font-family: var(--serif); }
.v2-wrap .v2-search:focus { border-bottom-color: var(--metal); box-shadow: 0 8px 14px -12px rgba(var(--metal-rgb),0.8); }
.v2-wrap .v2-chips { gap: 22px; }
.v2-wrap .v2-chipbtn { background: none; border: 0; border-radius: 0; padding: 8px 0; color: var(--steel); font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; position: relative; transition: color .2s; }
.v2-wrap .v2-chipbtn:hover { color: var(--metal-soft); background: none; border: 0; }
.v2-wrap .v2-chipbtn small { margin-left: 5px; opacity: .55; font-size: 10px; }
.v2-wrap .v2-chipbtn.on { color: var(--metal-soft); background: none; border: 0; }
.v2-wrap .v2-chipbtn.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--metal); }
/* the featured lesson */
.v2-feat { display: grid; grid-template-columns: 1.35fr 1fr; margin-bottom: 14px; border-radius: 20px; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, var(--base2), var(--base)); border: 1px solid rgba(var(--metal-rgb),0.26); box-shadow: 0 40px 70px -40px rgba(0,0,0,1), 0 0 60px -30px rgba(var(--acc-hi-rgb),0.5); outline: none; transition: border-color .3s, box-shadow .3s; }
.v2-feat:hover, .v2-feat:focus-visible { border-color: rgba(var(--metal-soft-rgb),0.6); box-shadow: 0 40px 70px -40px rgba(0,0,0,1), 0 0 80px -24px rgba(var(--acc-hi-rgb),0.7); }
.v2-feat-img { position: relative; min-height: 270px; overflow: hidden; }
.v2-feat-img .v2-cimg, .v2-feat-img .v2-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.v2-feat:hover .v2-feat-img .v2-cimg, .v2-feat:hover .v2-feat-img .v2-art { transform: scale(1.06); }
.v2-feat-img .v2-cshade { background: linear-gradient(90deg, rgba(var(--base-rgb),0) 55%, var(--base) 100%), linear-gradient(0deg, rgba(var(--base-rgb),0.5), transparent 50%); }
.v2-bigplay { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 5px; font-size: 26px; color: var(--metal-soft); background: radial-gradient(circle at 35% 30%, var(--acc-hi), var(--acc-deep)); border: 1px solid rgba(var(--metal-soft-rgb),0.7); box-shadow: 0 0 0 8px rgba(var(--acc-rgb),0.22), 0 18px 40px -10px rgba(var(--acc-hi-rgb),0.8); transition: transform .4s; }
.v2-feat:hover .v2-bigplay { transform: scale(1.1); }
.v2-feat-body { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.v2-feat-body h3 { margin: 4px 0 0; font: 500 clamp(24px, 2.6vw, 34px)/1.15 var(--serif); color: var(--metal-soft); }
.v2-feat-body p { margin: 0 0 12px; color: var(--steel); font-size: 13px; letter-spacing: .4px; }
.v2-wrap .v2-prog { color: var(--steel); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; margin: 6px 0 8px; }
.v2-wrap .v2-bar { height: 3px; background: rgba(255,255,255,0.09); border-radius: 3px; }
.v2-wrap .v2-bar > span { background: linear-gradient(90deg, var(--acc-hi), var(--metal)); box-shadow: 0 0 10px rgba(var(--acc-hi-rgb),0.7); }
.v2-cta { align-self: flex-start; margin-top: 14px; padding: 13px 28px; border-radius: 40px; font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: 2.2px; text-transform: uppercase; color: var(--metal-soft); background: linear-gradient(120deg, var(--acc-deep), var(--acc-hi) 50%, var(--acc-deep)); border: 1px solid rgba(var(--metal-soft-rgb),0.55); box-shadow: 0 12px 28px -12px rgba(var(--acc-hi-rgb),0.9), inset 0 1px 0 rgba(255,255,255,0.22); transition: transform .25s, box-shadow .25s; }
.v2-feat:hover .v2-cta { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(var(--acc-hi-rgb),1), inset 0 1px 0 rgba(255,255,255,0.28); }
/* editorial sections: an outlined numeral, a big title, a hairline, then a row of posters */
.v2-sec { margin: 54px 0 0; }
.v2-sec-head { position: relative; display: flex; align-items: center; gap: 22px; padding-bottom: 20px; cursor: pointer; }
.v2-sec-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--metal-rgb),0.55), rgba(var(--metal-rgb),0.08) 60%, transparent); }
.v2-num { flex: none; font: 500 clamp(46px, 6vw, 72px)/0.9 var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(var(--metal-rgb),0.55); letter-spacing: 1px; }
.v2-sec-t { flex: 1; min-width: 0; }
.v2-sec-t h2 { margin: 0; font: 500 clamp(24px, 3vw, 34px)/1.12 var(--serif); color: var(--metal-soft); }
.v2-sec-t p { margin: 6px 0 0; color: var(--steel); font-size: 14px; line-height: 1.55; max-width: 560px; }
.v2-sec-meta { flex: none; display: flex; align-items: center; gap: 14px; color: var(--metal); font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; white-space: nowrap; }
.v2-sec-meta b { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1px solid var(--hairline-strong); border-radius: 50%; font-size: 15px; font-weight: 400; letter-spacing: 0; }
.v2-wrap .v2-lessons { border: 0; padding: 26px 0 0; }
.v2-wrap .v2-group { margin: 6px 0 14px; color: var(--metal); font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 3px; gap: 14px; }
.v2-wrap .v2-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hairline-strong), transparent); }
.v2-wrap .v2-group span { border: 0; padding: 0; color: var(--steel); letter-spacing: 1px; order: 2; }
.v2-wrap .v2-group::after { order: 3; }
.v2-rowwrap { position: relative; margin: 0 -44px 10px; }
.v2-row { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 44px; padding: 8px 44px 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.v2-row::-webkit-scrollbar { display: none; }
.v2-arrow { position: absolute; top: calc(50% - 22px); z-index: 3; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; padding-bottom: 3px; color: var(--metal-soft); background: rgba(var(--base-rgb),0.82); border: 1px solid rgba(var(--metal-rgb),0.45); backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity .3s, transform .3s, background .3s; }
.v2-arrow.l { left: 14px; } .v2-arrow.r { right: 14px; }
.v2-rowwrap:hover .v2-arrow { opacity: 1; }
.v2-arrow:hover { background: var(--acc); transform: scale(1.08); }
/* the poster card: the picture is the card; the title sits on it */
.v2-card { flex: 0 0 clamp(250px, 25vw, 330px); scroll-snap-align: start; border-radius: 16px; outline: none; cursor: pointer; }
.v2-card.locked { cursor: default; }
.v2-wrap .v2-cthumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; border: 1px solid rgba(var(--metal-rgb),0.2); background: var(--base2); box-shadow: 0 22px 36px -24px rgba(0,0,0,1); transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .4s; }
.v2-card:not(.locked):hover .v2-cthumb, .v2-card:focus-visible .v2-cthumb { transform: translateY(-5px); border-color: rgba(var(--metal-soft-rgb),0.65); box-shadow: 0 30px 44px -22px rgba(0,0,0,1), 0 0 50px -18px rgba(var(--acc-hi-rgb),0.75); }
.v2-cimg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.v2-card:hover .v2-cimg, .v2-card:hover .v2-art { transform: scale(1.07); }
.v2-cshade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--base-rgb),0.94) 0%, rgba(var(--base-rgb),0.5) 38%, rgba(var(--base-rgb),0) 68%); pointer-events: none; }
.v2-art { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 18% 0%, rgba(var(--acc-hi-rgb),0.5), transparent 62%), linear-gradient(160deg, var(--acc-deep), var(--base)); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.v2-art::before { content: ""; position: absolute; right: -12%; top: -6%; width: 70%; height: 130%; background: conic-gradient(rgba(var(--metal-rgb),0.12) 25%, transparent 0 50%, rgba(var(--metal-rgb),0.12) 0 75%, transparent 0) 0 0 / 44px 44px; transform: rotate(14deg); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.v2-art span { position: absolute; right: 7%; top: 2%; font: 400 clamp(90px, 9vw, 130px)/1 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', var(--serif); color: rgba(var(--metal-soft-rgb),0.22); text-shadow: 0 0 30px rgba(var(--acc-hi-rgb),0.6); }
.v2-feat-img .v2-art span { font-size: clamp(150px, 16vw, 230px); right: 12%; top: 6%; }
.v2-ccap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 15px; }
.v2-wrap .v2-ctitle { font: 500 17px/1.25 var(--serif); color: var(--metal-soft); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
.v2-wrap .v2-cmeta { margin: 0; color: var(--metal); opacity: .85; font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; }
.v2-cplay { position: absolute; left: 50%; top: 42%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-left: 3px; font-size: 18px; color: var(--metal-soft); background: radial-gradient(circle at 35% 30%, var(--acc-hi), var(--acc-deep)); border: 1px solid rgba(var(--metal-soft-rgb),0.65); box-shadow: 0 0 0 6px rgba(var(--acc-rgb),0.2), 0 14px 30px -8px rgba(var(--acc-hi-rgb),0.85); opacity: 0; transform: scale(.7); transition: opacity .35s, transform .35s; }
.v2-card:hover .v2-cplay, .v2-card:focus-visible .v2-cplay { opacity: 1; transform: none; }
@media (hover: none) { .v2-cplay { opacity: .92; transform: none; width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 14px; } .v2-arrow { display: none; } }
.v2-clock { position: absolute; left: 50%; top: 42%; margin: -18px 0 0 -18px; font-size: 26px; opacity: .8; }
.v2-card.locked .v2-cthumb { filter: saturate(.5) brightness(.8); }
.v2-wrap .v2-cdur { right: 12px; top: 12px; bottom: auto; border-radius: 20px; padding: 4px 10px; background: rgba(var(--base-rgb),0.72); border: 1px solid rgba(var(--metal-rgb),0.3); color: var(--metal-soft); font: 600 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: 1px; backdrop-filter: blur(4px); position: absolute; }
.v2-wrap .v2-cbadge { position: absolute; left: 12px; top: 12px; border-radius: 20px; padding: 4px 10px; background: rgba(var(--base-rgb),0.72); border: 1px solid rgba(var(--metal-rgb),0.3); color: var(--metal-soft); font: 600 10.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.v2-wrap .v2-cbadge.done { color: #8CE8B3; border-color: rgba(111,214,154,0.5); }
.v2-wrap .v2-cbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.14); }
.v2-wrap .v2-cbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc-hi), var(--metal)); box-shadow: 0 0 10px rgba(var(--acc-hi-rgb),0.8); }
.v2-wrap .v2-chip { border: 1px solid rgba(var(--metal-rgb),0.4); color: var(--metal-soft); font-size: 9.5px; padding: 2px 8px; margin-left: 8px; }
/* the pictures: a gallery with natural proportions */
.v2-wrap .v2-pgrid { display: block; column-count: 4; column-gap: 20px; }
.v2-wrap .v2-pcard { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 24px; outline: none; }
.v2-wrap .v2-pthumb { aspect-ratio: auto; display: block; border-radius: 12px; border: 1px solid rgba(var(--metal-rgb),0.18); background: var(--base); overflow: hidden; box-shadow: 0 20px 34px -24px rgba(0,0,0,1); transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .4s; }
.v2-wrap .v2-pthumb img { width: 100%; height: auto; object-fit: initial; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.v2-wrap .v2-pcard:not(.locked):hover .v2-pthumb { transform: translateY(-5px); border-color: rgba(var(--metal-soft-rgb),0.6); box-shadow: 0 28px 40px -22px rgba(0,0,0,1), 0 0 44px -18px rgba(var(--acc-hi-rgb),0.7); }
.v2-wrap .v2-pcard:hover .v2-pthumb img { transform: scale(1.04); }
.v2-wrap .v2-ptitle { margin: 11px 2px 3px; font: 500 14.5px/1.3 var(--serif); color: var(--metal-soft); }
.v2-wrap .v2-psub { margin: 0 2px; color: var(--steel); font: 600 10px/1.3 Inter, system-ui, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.v2-wrap .v2-sechead h2, .v2-wrap .v2-lbody h2 { font: 500 clamp(26px, 3.4vw, 40px)/1.15 var(--serif); background: var(--leaf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-wrap .v2-subhead { color: var(--metal); letter-spacing: 3px; margin: 34px 0 16px; }
.v2-wrap .rv-card { background: linear-gradient(180deg, rgba(var(--metal-rgb),0.05), transparent 50%), var(--base2); border: 1px solid rgba(var(--metal-rgb),0.18); border-radius: 16px; }
.v2-wrap .v2-vnote { color: var(--steel); letter-spacing: .4px; }
/* the lesson page */
.v2-wrap .v2-player { border-radius: 18px; border: 1px solid rgba(var(--metal-rgb),0.42); box-shadow: 0 40px 70px -34px rgba(0,0,0,1), 0 0 70px -26px rgba(var(--acc-hi-rgb),0.55); }
.v2-wrap .v2-eyebrow { color: var(--metal); letter-spacing: 3px; font-weight: 600; font-size: 11px; }
.v2-wrap .v2-desc p, .v2-wrap .v2-notes p { color: var(--gray); }
.v2-wrap .v2-notes { background: linear-gradient(180deg, rgba(var(--metal-rgb),0.05), transparent 50%), var(--base2); border: 1px solid rgba(var(--metal-rgb),0.18); border-radius: 16px; }
.v2-wrap .v2-notes h4 { color: var(--metal); letter-spacing: 2.4px; }
.v2-wrap .v2-res a { border-color: rgba(var(--metal-rgb),0.4); background: rgba(var(--metal-rgb),0.05); color: var(--metal-soft); }
.v2-wrap .v2-res a:hover { background: rgba(var(--acc-rgb),0.3); border-color: var(--metal); }
.v2-wrap .btn-submit { background: linear-gradient(120deg, var(--acc-deep), var(--acc-hi) 50%, var(--acc-deep)); color: var(--metal-soft); border: 1px solid rgba(var(--metal-soft-rgb),0.55); border-radius: 40px; letter-spacing: 1.8px; text-transform: uppercase; font-size: 12px; font-weight: 600; box-shadow: 0 12px 28px -12px rgba(var(--acc-hi-rgb),0.9), inset 0 1px 0 rgba(255,255,255,0.2); transition: transform .2s, box-shadow .2s; }
.v2-wrap .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(var(--acc-hi-rgb),1), inset 0 1px 0 rgba(255,255,255,0.26); }
.v2-wrap .btn-secondary { background: transparent; color: var(--metal-soft); border: 1px solid rgba(var(--metal-rgb),0.4); border-radius: 40px; letter-spacing: 1.4px; text-transform: uppercase; font-size: 11.5px; font-weight: 600; }
.v2-wrap .btn-secondary:hover { background: rgba(var(--acc-rgb),0.28); border-color: var(--metal); }
.v2-wrap > .btn-secondary:first-child { margin-top: 30px; }
.v2-wrap > .v2-player, .v2-wrap > .v2-lbody { margin-bottom: 0; }
/* reveal on scroll */
.v2-rv { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.v2-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v2-rv { opacity: 1; transform: none; transition: none; } .v2-cimg, .v2-art, .v2-pthumb img { transition: none; } }
/* the full-screen picture viewer */
.v2-vw { background: radial-gradient(900px 400px at 50% -100px, rgba(var(--acc-rgb),0.3), transparent 70%), var(--base); }
.v2-vw-bar { border-bottom: 0; box-shadow: 0 1px 0 rgba(var(--metal-rgb),0.3); position: relative; }
.v2-vw-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--metal-soft-rgb),0.8), transparent); }
.v2-vw-t strong { font-family: 'Fraunces', serif; font-weight: 500; font-size: 17px; background: linear-gradient(100deg, #FFF6E0, #EBD5A8 40%, #C09A5E 70%, #F4E4C1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-vw-btns button { background: rgba(var(--acc-rgb),0.2); border-color: rgba(var(--metal-rgb),0.4); color: var(--metal-soft); border-radius: 20px; }
.v2-vw-btns button:hover { background: rgba(var(--acc-hi-rgb),0.45); }
.v2-vw-cap { border-top: 0; box-shadow: 0 -1px 0 rgba(var(--metal-rgb),0.26); }
@media (max-width: 1100px) { .v2-wrap .v2-pgrid { column-count: 3; } }
@media (max-width: 860px) {
  .v2-feat { grid-template-columns: 1fr; }
  .v2-feat-img { min-height: 0; aspect-ratio: 16 / 9; }
  .v2-feat-img .v2-cshade { background: linear-gradient(0deg, var(--base) 0%, rgba(var(--base-rgb),0) 55%); }
  .v2-feat-body { padding: 22px 22px 26px; }
}
@media (max-width: 640px) {
  .v2-wrap { border-radius: 18px; padding-bottom: 36px; }
  .v2-wrap > *:not(.v2-top) { margin-left: 16px; margin-right: 16px; }
  .v2-top { padding: 0 18px 28px; min-height: 250px; margin-bottom: 22px; }
  .v2-top p { font-size: 14.5px; }
  .v2-piece { right: -4%; opacity: .8; }
  .v2-wrap .v2-tabs { gap: 24px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .v2-wrap .v2-tab { white-space: nowrap; flex: none; }
  .v2-wrap .v2-chips { gap: 18px; }
  .v2-sec { margin-top: 40px; }
  .v2-sec-head { gap: 14px; align-items: flex-start; flex-wrap: wrap; }
  .v2-sec-meta { width: 100%; order: 3; padding-left: 0; }
  .v2-rowwrap { margin: 0 -16px 6px; }
  .v2-row { gap: 14px; padding: 6px 16px 18px; scroll-padding-left: 16px; }
  .v2-card { flex-basis: 74vw; }
  .v2-wrap .v2-pgrid { column-count: 2; column-gap: 12px; }
  .v2-wrap .v2-pcard { margin-bottom: 16px; }
  .v2-feat-body h3 { font-size: 23px; }
}

.v2-drop { border: 2px dashed var(--hairline-strong); border-radius: 12px; padding: 18px; margin: 12px 0; text-align: center; }
.v2-drop.on { border-color: var(--gold); background: rgba(var(--gold-rgb),0.06); }

/* The exam, graduation and badge screens in the Command Chamber: boxes that read on the dark page */
.adm input[type=text], .adm input[type=number], .adm select, .adm textarea { box-sizing: border-box; background: rgba(var(--ink-rgb),0.04); border: 1px solid var(--hairline-strong); color: var(--white); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }
.adm input[type=text]:focus, .adm input[type=number]:focus, .adm select:focus, .adm textarea:focus { outline: none; border-color: var(--gold); }
.adm table { color: var(--gray); }

/* the small live preview in the Colors tab of the instructor's controls */
.v2-wrap.v2-mini { margin: 14px 0; max-width: none; padding: 0 0 22px; border-radius: 18px; }
.v2-wrap.v2-mini > *:not(.v2-top) { margin-left: 26px; margin-right: 26px; }
.v2-wrap.v2-mini .v2-top { min-height: 200px; padding: 0 26px 26px; margin-bottom: 18px; }
.v2-wrap.v2-mini .v2-top h1 { font-size: 34px; margin: 10px 0; }
.v2-wrap.v2-mini .v2-piece { font-size: 210px; }

/* the room fills the whole page width, edge to edge, and covers the page background behind it */
main:has(#view-v2.active) { max-width: none; padding: 0; }
#view-v2 > :not(.v2-wrap) { margin-left: clamp(16px, 3vw, 32px); margin-right: clamp(16px, 3vw, 32px); }
#view-v2 .v2-wrap:not(.v2-mini) { max-width: none; margin: 0; border-radius: 0; border-left: 0; border-right: 0; min-height: calc(100vh - 120px); }

/* round two: the search is easy to see, the module numbers are big and bold, and nothing of the page background shows behind the room */
.v2-wrap .v2-search { background: rgba(var(--metal-rgb),0.1); border: 2px solid rgba(var(--metal-rgb),0.75); border-radius: 999px; padding: 14px 22px 14px 48px; font: 600 16px/1.2 Inter, system-ui, sans-serif; color: var(--white); box-shadow: 0 0 0 4px rgba(var(--acc-hi-rgb),0.12), 0 10px 26px -14px rgba(var(--acc-hi-rgb),0.9);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23F6E8CB' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>"); background-repeat: no-repeat; background-position: 18px center; }
.v2-wrap .v2-search::placeholder { color: rgba(var(--text-rgb),0.7); font: 600 16px/1.2 Inter, system-ui, sans-serif; font-style: normal; }
.v2-wrap .v2-search:focus { border-color: var(--metal-soft); box-shadow: 0 0 0 5px rgba(var(--acc-hi-rgb),0.28), 0 10px 26px -12px rgba(var(--acc-hi-rgb),1); }
.v2-num { font: 800 clamp(56px, 7vw, 92px)/0.9 var(--serif); color: transparent; background: linear-gradient(180deg, var(--metal-soft), var(--acc-hi) 120%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; letter-spacing: 0; filter: drop-shadow(0 4px 18px rgba(var(--acc-hi-rgb),0.55)); }
.v2-wrap .v2-group { font: 800 17px/1 Inter, system-ui, sans-serif; letter-spacing: 3px; color: var(--metal-soft); }
.v2-wrap .v2-group span { color: var(--white); font-weight: 700; font-size: 14px; background: rgba(var(--acc-rgb),0.55); border-radius: 999px; padding: 4px 11px; }
.v2-sec-t h2 { font-weight: 700; }
body:has(#view-v2.active), main:has(#view-v2.active), #view-v2.active { background: var(--v2-page, #0B0508); }
main:has(#view-v2.active) { min-height: 100vh; }

/* round three: each module gets a big, unmissable badge, in the videos and in the pictures */
.v2-modhead { display: flex; align-items: center; gap: 16px; margin: 26px 0 16px; }
.v2-modhead::after { content: ""; order: 4; flex: 1; height: 2px; background: linear-gradient(90deg, rgba(var(--acc-hi-rgb),0.9), rgba(var(--metal-rgb),0.25) 55%, transparent); }
.v2-modno { order: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 74px; padding: 8px 20px; border-radius: 14px; font: 900 clamp(26px, 3.2vw, 38px)/1 Inter, system-ui, sans-serif; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  background: linear-gradient(135deg, var(--acc-hi), var(--acc-deep)); border: 2px solid var(--metal-soft); box-shadow: 0 0 0 4px rgba(var(--acc-hi-rgb),0.2), 0 14px 30px -10px rgba(var(--acc-hi-rgb),0.95); }
.v2-modttl { order: 2; font: 700 clamp(18px, 2.2vw, 26px)/1.2 var(--serif); color: var(--metal-soft); }
.v2-modcnt { order: 3; font-style: normal; font: 800 14px/1 Inter, system-ui, sans-serif; color: var(--base); background: var(--metal-soft); border-radius: 999px; padding: 6px 13px; }
.v2-psec { margin-bottom: 18px; }
@media (max-width: 640px) { .v2-modhead { gap: 10px; flex-wrap: wrap; } .v2-modhead::after { flex-basis: 100%; order: 5; } .v2-modno { min-width: 60px; padding: 6px 14px; } }
.v2-wrap .v2-chipbtn { font-weight: 800; font-size: 13px; letter-spacing: 1.6px; color: var(--metal-soft); }
.v2-wrap .v2-chipbtn small { font-size: 12px; color: var(--metal); opacity: .9; }
.v2-wrap .v2-chipbtn.on { color: #fff; }