.live-note{position:relative;z-index:2;background:var(--ai-soft);color:var(--ai);font-family:var(--mono);font-size:.72rem;text-align:center;padding:5px 10px;border-bottom:1px solid var(--border)}
.auth-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:13px 14px;color:var(--muted);font-size:.88rem;margin:0 0 14px}
.notice.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 32%,var(--border));color:var(--warn)}
.notice.good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 28%,var(--border));color:var(--good)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}.form-grid .full{grid-column:1/-1}@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
input[type=file]{width:100%;font:inherit;font-size:.86rem;padding:9px;border:1px dashed var(--border-strong);border-radius:10px;background:var(--surface)}
input[type=datetime-local],input[type=date],select{width:100%;font:inherit;padding:9px 10px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--ink)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}.toolbar .sub{margin:0}
.stack{display:grid;gap:12px}.mini{font-size:.78rem;color:var(--muted)}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.actions .btn{flex:0 0 auto}.preview-actions{align-items:center;margin-top:8px}.preview-actions .hint{margin:0}
.cover-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.work-cover{aspect-ratio:4/3;position:relative;display:grid;place-items:center;overflow:hidden;color:#fff}.work-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.2))}.work-cover.ai{background:linear-gradient(135deg,#0E7C7B,#0fa8a6)}.work-cover.draw{background:linear-gradient(135deg,#db5127,#f6a13c)}.work-cover.gen{background:linear-gradient(135deg,#6a45c9,#9b6ef0)}.work-cover .big{font-size:2.2rem;z-index:1}.work-cover .run{position:absolute;inset:0;border:0;background:rgba(9,10,18,.32);color:#fff;opacity:0;transition:opacity .2s;z-index:2}.work-cover:hover .run,.work-cover:focus-within .run{opacity:1}.work-cover .run span{display:inline-block;background:rgba(0,0,0,.62);padding:8px 14px;border-radius:999px}
.status-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.status-line .pill{margin-left:auto}.assignment-row{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}.assignment-row h3{margin:0;font-size:1rem}.assignment-row p{margin:4px 0 0}.empty p{margin:6px 0 0}.admin-split{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}@media(max-width:760px){.admin-split{grid-template-columns:1fr}}
.profile-warning{font-size:.82rem;color:var(--warn);margin-top:4px}.image-preview{display:block;width:100%;max-height:190px;object-fit:cover;border-radius:10px;margin-top:9px;border:1px solid var(--border)}
.danger{color:#ff9b9b;border-color:color-mix(in srgb,#ff6b6b 40%,var(--border))}.p5-draft{margin-top:10px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#10131c}.p5-draft-head,.p5-pane-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#171b26;border-bottom:1px solid #2c3242;color:#d9ddef;font:500 .78rem var(--mono)}.p5-draft-head span,.p5-pane-head span{color:#8992aa;font-size:.7rem}.p5-source{display:block;width:100%;min-height:280px;resize:vertical;border:0!important;border-radius:0!important;background:#10131c!important;color:#edf1ff!important;font:13px/1.55 var(--mono)!important;tab-size:2}.p5-box{width:min(1160px,calc(100vw - 28px))!important;max-width:none!important}.p5-workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:450px;background:#10131c}.p5-editor-pane,.p5-preview-pane{min-width:0;display:flex;flex-direction:column}.p5-editor-pane{border-right:1px solid #2c3242}.p5-editor-pane .p5-source{height:100%;min-height:400px;flex:1}.p5-runner-host{position:relative;flex:1;min-height:400px;background:#0a0d14;display:grid;place-items:center}.p5-runner-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.p5-canvas-empty{color:#8f99b4;font:13px var(--mono);padding:22px;text-align:center}.p5-workbench-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 14px;background:#171b26;border-top:1px solid #2c3242}.p5-security{margin-left:auto;color:#a9b2ca;font-size:.78rem}.p5-console-wrap{border-top:1px solid #2c3242;background:#0b0e15}.p5-console-head{padding:7px 12px;color:#aab3ca;font:600 .72rem var(--mono);border-bottom:1px solid #252b39}.p5-console{min-height:48px;max-height:150px;overflow:auto;margin:0;padding:10px 12px;color:#c9d2e9;font:12px/1.5 var(--mono);white-space:pre-wrap}.p5-console[data-tone="ok"]{color:#80e0bd}.p5-console[data-tone="error"]{color:#ffb0b0}@media(max-width:760px){.p5-workbench{grid-template-columns:1fr;min-height:0}.p5-editor-pane{border-right:0;border-bottom:1px solid #2c3242}.p5-editor-pane .p5-source,.p5-runner-host{min-height:300px}.p5-security{width:100%;margin-left:0}}

/* ThreeUI catalog layout with a restrained liquid-glass surface. */
:root{--ground:#070911;--surface:#101521;--surface-2:#151b29;--ink:#f4f6ff;--muted:#9da8be;--faint:#6e7890;--border:#283245;--border-strong:#3a4760;--ai:#5ce3dd;--ai-soft:#102c32;--art:#ff946f;--art-soft:#372018;--gen:#bda2ff;--gen-soft:#211a3d;--accent:#84f5ea;--glass:rgba(16,21,33,.66);--glass-border:rgba(196,214,255,.13);--shadow:0 10px 30px rgba(0,0,0,.2);--shadow-lg:0 22px 60px rgba(0,0,0,.42)}
body{background:radial-gradient(circle at 82% -8%,rgba(104,83,255,.2),transparent 32%),radial-gradient(circle at -10% 28%,rgba(39,199,193,.13),transparent 34%),var(--ground);}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.18;background-image:linear-gradient(rgba(174,197,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(174,197,255,.06) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 68%)}
.live-note{background:rgba(7,9,17,.82);border-color:rgba(189,162,255,.16);color:#bda2ff;letter-spacing:.08em}
header.app{background:rgba(7,9,17,.72);border-color:rgba(196,214,255,.1);backdrop-filter:blur(24px) saturate(1.25)}
.bar,nav.tabs,main{max-width:1180px}.bar{padding:14px 22px}.brand{font-family:var(--mono);font-size:1rem;letter-spacing:.02em;white-space:normal}.brand-copy{display:flex;align-items:center;gap:12px;min-width:0}.brand-title{font-family:var(--serif);font-size:1.42rem;line-height:1;letter-spacing:.05em;background:linear-gradient(120deg,#fff 10%,#c8fff8 52%,#bda2ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(132,245,234,.18);white-space:nowrap}.brand-tagline{color:#9da8be;font:500 .68rem/1.35 var(--sans);letter-spacing:.01em;padding-left:12px;margin-left:0;border-left:1px solid rgba(196,214,255,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand .dot{border-radius:9px;width:28px;height:28px}.btn{border-radius:999px;background:rgba(255,255,255,.045);border-color:rgba(196,214,255,.16)}
nav.tabs{gap:6px;padding:0 16px 8px}nav.tabs button{border:1px solid transparent;border-radius:999px;padding:7px 12px}nav.tabs button.active{background:rgba(132,245,234,.1);border-color:rgba(132,245,234,.17);color:#9ff9ef}nav.tabs button:hover:not(.active){background:rgba(255,255,255,.05)}.brand .brand-logo{width:30px;height:30px;object-fit:contain;flex:none;filter:drop-shadow(0 2px 7px rgba(255,255,255,.12))}
.sub-tabs{display:flex;gap:8px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid rgba(196,214,255,.1);overflow-x:auto}.sub-tab{background:transparent;border:0;color:var(--muted);padding:8px 12px;font:500 .9rem var(--sans);border-radius:8px;white-space:nowrap;cursor:pointer;transition:all .2s}.sub-tab:hover{color:var(--ink);background:rgba(255,255,255,.05)}.sub-tab.active{color:var(--ink);background:rgba(132,245,234,.1);color:#84f5ea}
main{padding:28px 22px 96px}.catalog-kicker{margin:0 0 8px;color:#8ff5ed;font:600 .69rem/1.2 var(--mono);letter-spacing:.14em}

.catalog-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);min-height:410px;margin-bottom:20px;border-radius:28px;border:1px solid rgba(255,255,255,0.1);isolation:isolate;background:rgba(255,255,255,0.05);backdrop-filter:blur(36px) saturate(1.5);-webkit-backdrop-filter:blur(36px) saturate(1.5);box-shadow:inset 0 1px 1px rgba(255,255,255,0.2),inset 0 -1px 1px rgba(0,0,0,0.8),0 20px 40px rgba(0,0,0,0.7)}
.catalog-hero::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 40px rgba(255,255,255,0.06);pointer-events:none}

.liquid-surface{background:var(--lg-bg) !important;box-shadow:inset 0 1px 1px var(--lg-edge-top),inset 1px 0 1px var(--lg-border),inset -1px -1px 2px var(--lg-shadow-inner),0 12px 32px var(--lg-shadow-drop) !important;backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);border:1px solid var(--lg-border) !important}
.catalog-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:42px 20px 42px 42px}.catalog-copy h1{margin:0;font:800 clamp(2.6rem,5vw,5.4rem)/.97 var(--serif);letter-spacing:-.08em}.catalog-copy h1 em{font-style:normal;background:linear-gradient(110deg,#9cf8ef,#b59cff 52%,#ffb48f);-webkit-background-clip:text;background-clip:text;color:transparent}.catalog-copy>p:not(.catalog-kicker){max-width:440px;margin:20px 0;color:#b8c1d4;font-size:.98rem}.catalog-stat{display:flex;align-items:center;gap:9px;color:#aeb8ce;font-size:.78rem}.catalog-stat b{font:700 1.42rem/1 var(--mono);color:#fff}.catalog-stat i{width:1px;height:16px;background:rgba(255,255,255,.24);margin:0 2px}.catalog-scene{position:relative;min-height:410px;border-left:1px solid rgba(196,214,255,.1);background:linear-gradient(135deg,rgba(7,9,17,.06),rgba(122,91,255,.1))}.catalog-scene #heroMount{height:100%;min-height:410px}.scene-label{position:absolute;inset:auto 22px 19px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#b7c2dc;font:500 .64rem var(--mono);letter-spacing:.1em;pointer-events:none}.scene-label b{font-weight:500;color:#fff}
.hg-glass-panel{background:rgba(255,255,255,0.05);backdrop-filter:blur(36px) saturate(1.5);-webkit-backdrop-filter:blur(36px) saturate(1.5);box-shadow:inset 0 1px 1px rgba(255,255,255,0.2),inset 0 -1px 1px rgba(0,0,0,0.8),0 20px 40px rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.1);border-radius:28px;position:relative;overflow:hidden}
.hg-glass-panel::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 40px rgba(255,255,255,0.06);pointer-events:none}
.gallery-toolbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;margin:0 0 18px;padding:24px 32px}.gallery-toolbar h2{margin:0;font:700 1.25rem var(--serif)}.gallery-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.filters{margin:0;gap:6px}.fchip{background:rgba(255,255,255,.045);border-color:rgba(196,214,255,.15);padding:8px 16px;border-radius:999px;transition:all 0.2s}.fchip:hover{background:rgba(255,255,255,0.1)}.work-search{display:flex;align-items:center;gap:8px;width:220px;padding:9px 16px;border:1px solid rgba(255,255,255,0.2);border-radius:999px;background:rgba(0,0,0,0.2);color:#84f5ea;box-shadow:inset 0 1px 4px rgba(0,0,0,0.3)}.work-search input{min-width:0;width:100%;border:0!important;outline:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink);font:inherit}.work-search input::placeholder{color:#71809a}.gallery-count{margin:0;white-space:nowrap;color:#9da8be;font-size:.8rem}.gallery-count b{color:#fff;font:600 .9rem var(--mono)}
.catalog-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.art{border-color:rgba(196,214,255,.14);border-radius:24px;background:linear-gradient(145deg,rgba(25,31,47,.76),rgba(12,16,27,.67));box-shadow:inset 0 1px rgba(255,255,255,.08),var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.art:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.3);box-shadow:0 26px 56px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1)}.work-cover{aspect-ratio:16/10;border-top-left-radius:24px;border-top-right-radius:24px;overflow:hidden}.art .body{padding:20px;gap:8px}.art .ttl{font-size:1.03rem}.art .desc{line-height:1.55}.tool-link{align-self:flex-start;margin-top:4px;text-decoration:none}.work-cover .run{display:grid;place-items:center;text-decoration:none}.art[hidden]{display:none!important}
.card,.hwitem{background:linear-gradient(145deg,rgba(25,31,47,.74),rgba(12,16,27,.64));border-color:rgba(196,214,255,.13);box-shadow:inset 0 1px rgba(255,255,255,.07),var(--shadow)}.modal{background:rgba(3,5,10,.82)}.modal .box{border:1px solid rgba(196,214,255,.17);background:#111724}.p5-workbench,.p5-draft{background:#0b0f18}.p5-draft-head,.p5-pane-head,.p5-workbench-actions{background:#121827}.p5-console-wrap{background:#090d15}
@media(max-width:820px){.catalog-hero{grid-template-columns:1fr}.catalog-copy{padding:38px 28px 30px}.catalog-scene{min-height:285px;border-left:0;border-top:1px solid rgba(196,214,255,.1)}.catalog-scene #heroMount{min-height:285px}.gallery-toolbar{grid-template-columns:1fr auto}.gallery-controls{grid-column:1/-1;justify-content:flex-start}.catalog-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){main{padding:18px 14px 72px}.bar{padding:12px 14px}.brand{flex-wrap:wrap;row-gap:1px}.brand-copy{gap:7px;flex-wrap:wrap}.brand-title{font-size:1.18rem}.brand-tagline{flex-basis:100%;border-left:0;padding-left:0;margin-left:0;margin-top:-2px;font-size:.62rem;white-space:normal;color:#8995aa}.catalog-hero{border-radius:22px}.catalog-copy{padding:32px 22px 26px}.catalog-copy h1{font-size:2.65rem}.catalog-scene,.catalog-scene #heroMount{min-height:235px}.gallery-toolbar{grid-template-columns:1fr;padding:16px}.gallery-count{display:none}.work-search{width:100%}.gallery-controls{width:100%}.catalog-wall{grid-template-columns:1fr}.scene-label{inset:auto 16px 14px}.auth-name{display:none}}

/* Teacher-selected featured artwork carousel. */
.featured-stage{position:absolute;inset:0;overflow:hidden;background:#080b14}.featured-stage #heroMount{height:100%;min-height:410px}.featured-image{display:block;width:100%;height:100%;object-fit:cover;animation:featuredIn .7s ease both}.featured-p5-host{position:absolute;inset:0;overflow:hidden;background:#080b14}.featured-p5-poster,.featured-p5-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;transition:opacity .35s ease}.featured-p5-poster{z-index:1}.featured-p5-poster-empty{background:radial-gradient(ellipse at 35% 35%,rgba(39,142,160,.24),transparent 48%),radial-gradient(ellipse at 74% 67%,rgba(112,67,200,.2),transparent 48%),#10131c}.featured-p5-host iframe{z-index:0;opacity:0}.featured-p5-host[data-state="ready"] iframe{z-index:2;opacity:1}.featured-p5-host[data-state="ready"] .featured-p5-poster{opacity:0}.featured-p5-status{position:absolute;z-index:3;top:18px;left:50%;transform:translateX(-50%);padding:7px 11px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(12,15,25,.7);backdrop-filter:blur(10px);color:#fff;font:.7rem/1.3 var(--mono);white-space:nowrap;opacity:1;transition:opacity .2s ease}.featured-p5-host[data-state="ready"] .featured-p5-status{opacity:0;pointer-events:none}.featured-p5-host[data-state="error"] .featured-p5-status{background:rgba(90,34,43,.88);color:#fff}.featured-empty{height:100%;display:grid;place-items:center;padding:28px;text-align:center;color:#aeb8ce;font:.82rem/1.7 var(--mono);background:radial-gradient(circle at 50% 45%,rgba(102,78,223,.24),transparent 58%)}.featured-caption{position:absolute;inset:auto 18px 54px;display:flex;align-items:center;gap:9px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.65);z-index:2}.featured-caption span{padding:5px 8px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(7,9,17,.62);font:.65rem var(--mono);letter-spacing:.08em}.featured-caption b{font:700 1.1rem var(--serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.featured-caption em{margin-left:auto;font:500 .68rem var(--mono);font-style:normal;white-space:nowrap}.featured-dots{position:absolute;right:18px;top:18px;display:flex;gap:5px;z-index:2}.featured-dot{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.35)}.featured-dot.on{width:20px;background:#9ff9ef}@media(prefers-reduced-motion:reduce){.featured-p5-poster,.featured-p5-host iframe,.featured-p5-status{transition:none}}@keyframes featuredIn{from{opacity:.15;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
.featured-admin{margin-top:14px}.featured-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.featured-option{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid var(--border);border-radius:11px;background:rgba(4,6,12,.2);cursor:pointer}.featured-option:hover{border-color:rgba(159,249,239,.4)}.featured-option input{accent-color:#84f5ea;margin-top:3px}.featured-option b,.featured-option small{display:block}.featured-option b{font-size:.9rem}.featured-option small{margin-top:3px;color:var(--muted);font-size:.76rem}@media(max-width:820px){.featured-stage #heroMount{min-height:285px}}@media(max-width:560px){.featured-stage #heroMount{min-height:235px}.featured-caption{inset:auto 14px 46px}.featured-caption b{font-size:1rem}.featured-options{grid-template-columns:1fr}}

.site-footer{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 22px 34px;display:flex;align-items:center;justify-content:center;gap:10px;color:#768299;text-align:left}.site-footer img{width:34px;height:34px;filter:drop-shadow(0 4px 10px rgba(132,245,234,.2))}.site-footer div{display:grid;gap:2px}.site-footer b{color:#b9c5d9;font:600 .72rem var(--mono);letter-spacing:.04em}.site-footer span{font-size:.68rem;color:#68748b}@media(max-width:560px){.site-footer{padding:0 16px 28px}.site-footer b{font-size:.65rem}.site-footer span{font-size:.62rem}}
.brand .brand-mark-shell{width:48px;height:48px;display:grid;place-items:center;flex:none;border:1px solid rgba(132,245,234,.34);border-radius:10px;background:linear-gradient(145deg,rgba(66,81,102,.68),rgba(18,23,33,.96));box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 4px 14px rgba(83,203,224,.18)}
.brand .brand-logo{width:46px;height:46px;object-fit:contain;filter:brightness(1.35) saturate(1.2) drop-shadow(0 0 3px rgba(122,234,225,.55));image-rendering:pixelated}
.site-footer img{width:48px;height:48px;padding:6px;object-fit:contain;border-radius:14px;background:#fff;border:1px solid rgba(255,255,255,.55);filter:drop-shadow(0 4px 12px rgba(0,0,0,.28))}
.p5-viewer-box{width:min(1040px,calc(100vw - 28px))!important;max-width:none!important}.p5-viewer-meta{padding:18px 20px;background:#151b26;border-bottom:1px solid #2c3242}.p5-viewer-meta h2{margin:0;color:#f3f6ff;font:700 1.35rem var(--serif)}.p5-viewer-meta p{margin:8px 0 0;color:#b4bfd4;line-height:1.65}.p5-viewer-meta .p5-interaction-help{margin:10px 0 0}.p5-viewer-stage{background:#0a0d14}.p5-viewer-stage .p5-pane-head{border-top:0}.p5-viewer-stage .p5-runner-host{min-height:560px;height:min(64vh,640px)}.p5-viewer-note{margin:0;padding:10px 18px;background:#10141e;color:#8f9ab3;font-size:.78rem}@media(max-width:760px){.p5-viewer-stage .p5-runner-host{min-height:360px;height:58vh}}



/* ═══ Liquid Glass Enhancement ═══
   Only visual effects — no layout changes.
   Adds: edge lighting, saturated blur, surface reflection, category glow.
*/
:root {
  --lg-blur: blur(24px) saturate(1.8);
  --lg-edge-top: rgba(255,255,255,0.6);
  --lg-edge-bot: rgba(255,255,255,0.1);
  --lg-reflect: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 38%, transparent 62%, rgba(255,255,255,0.1) 100%);
  --lg-bg: rgba(255, 255, 255, 0.4);
  --lg-border: rgba(255, 255, 255, 0.5);
  --lg-shadow-inner: rgba(255, 255, 255, 0.4);
  --lg-shadow-drop: rgba(0,0,0,0.06);
  --ai-glow: rgba(92,227,221,0.13);
  --art-glow: rgba(255,148,111,0.13);
  --gen-glow: rgba(189,162,255,0.13);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) {
    --lg-edge-top: rgba(255,255,255,0.25);
    --lg-edge-bot: rgba(255,255,255,0.04);
    --lg-reflect: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 38%, transparent 62%, rgba(255,255,255,0.04) 100%);
    --lg-bg: rgba(20, 25, 35, 0.45);
    --lg-border: rgba(255, 255, 255, 0.08);
    --lg-shadow-inner: rgba(0, 0, 0, 0.4);
    --lg-shadow-drop: rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"] {
  --lg-edge-top: rgba(255,255,255,0.25);
  --lg-edge-bot: rgba(255,255,255,0.04);
  --lg-reflect: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 38%, transparent 62%, rgba(255,255,255,0.04) 100%);
  --lg-bg: rgba(20, 25, 35, 0.45);
  --lg-border: rgba(255, 255, 255, 0.08);
  --lg-shadow-inner: rgba(0, 0, 0, 0.4);
  --lg-shadow-drop: rgba(0,0,0,0.35);
}

/* Header — sharper glass with edge lighting */
header.app {
  background: var(--lg-bg) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  box-shadow: inset 0 -1px 0 var(--lg-edge-bot), 0 4px 24px var(--lg-shadow-drop) !important;
  border-bottom: 1px solid var(--lg-border) !important;
}

/* Cards & Modals — full liquid glass surface */
.art, .card, .hwitem, .modal .box {
  position: relative;
  background: var(--lg-bg) !important;
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow:
    inset 0 1px 1px var(--lg-edge-top),
    inset 1px 0 1px var(--lg-border),
    inset -1px -1px 2px var(--lg-shadow-inner),
    0 12px 32px var(--lg-shadow-drop) !important;
  border: 1px solid var(--lg-border) !important;
  overflow: hidden;
}
/* Surface reflection gradient — simulates curved glass */
.art::after, .card::after, .hwitem::after, .modal .box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--lg-reflect);
  pointer-events: none;
  z-index: 3;
}

/* Category glow — colored inner light through glass */
.art.glow-ai {
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    inset 0 -1px 0 var(--lg-edge-bot),
    0 10px 30px rgba(0,0,0,0.22),
    0 0 32px var(--ai-glow),
    inset 0 0 22px var(--ai-glow);
}
.art.glow-ai:hover {
  border-color: rgba(92,227,221,0.38);
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    0 26px 56px rgba(0,0,0,0.36),
    0 0 48px rgba(92,227,221,0.22),
    inset 0 0 28px rgba(92,227,221,0.15);
}
.art.glow-gen {
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    inset 0 -1px 0 var(--lg-edge-bot),
    0 10px 30px rgba(0,0,0,0.22),
    0 0 32px var(--gen-glow),
    inset 0 0 22px var(--gen-glow);
}
.art.glow-gen:hover {
  border-color: rgba(189,162,255,0.38);
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    0 26px 56px rgba(0,0,0,0.36),
    0 0 48px rgba(189,162,255,0.22),
    inset 0 0 28px rgba(189,162,255,0.15);
}
.art.glow-art {
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    inset 0 -1px 0 var(--lg-edge-bot),
    0 10px 30px rgba(0,0,0,0.22),
    0 0 32px var(--art-glow),
    inset 0 0 22px var(--art-glow);
}
.art.glow-art:hover {
  border-color: rgba(255,148,111,0.38);
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    0 26px 56px rgba(0,0,0,0.36),
    0 0 48px rgba(255,148,111,0.22),
    inset 0 0 28px rgba(255,148,111,0.15);
}

/* General panels — liquid glass edge lighting */
.card, .hwitem {
  backdrop-filter: var(--lg-blur);
  -webkit-backdrop-filter: var(--lg-blur);
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    inset 0 -1px 0 var(--lg-edge-bot),
    0 10px 30px rgba(0,0,0,0.20);
}



/* Filter chips — subtle liquid edge */
.fchip {
  backdrop-filter: blur(8px) saturate(1.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.fchip:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 4px 16px rgba(0,0,0,0.18);
}
.fchip.on.ai {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 18px var(--ai-glow);
}
.fchip.on.draw {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 18px var(--art-glow);
}
.fchip.on.gen {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 18px var(--gen-glow);
}

/* Hero liquid surface — enhanced */
.catalog-hero .liquid-surface {
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    inset 0 -1px 0 var(--lg-edge-bot),
    var(--shadow-lg);
}

/* Nav tabs — glass on active */
nav.tabs button.active {
  backdrop-filter: blur(10px) saturate(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(132,245,234,0.12);
}

/* Modal — liquid glass */
.modal .box {
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 var(--lg-edge-top),
    0 24px 70px rgba(0,0,0,0.5);
}

/* Big button — edge lighting */
.bigbtn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 4px 20px rgba(14,124,123,0.30);
}

/* Toast — liquid glass */
.toast {
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 8px 30px rgba(0,0,0,0.35);
}

/* ═══ 學習連結 — 收納手風琴 ═══ */
.link-accordion {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 2px 8px rgba(0,0,0,0.18);
  transition: box-shadow .2s;
}
.link-accordion[open] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 16px rgba(0,0,0,0.22);
}
.link-accordion-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg, #e8e8e8);
  transition: background .15s;
}
.link-accordion-header::-webkit-details-marker { display: none; }
.link-accordion-header::marker { content: ''; }
.link-accordion-header:hover {
  background: rgba(255,255,255,0.05);
}
.link-accordion-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.link-accordion-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.link-accordion-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(255,255,255,0.12);
  font-size: .75rem;
  font-weight: 500;
  color: var(--fg, #ccc);
}
.link-accordion-desc {
  flex: 1;
  font-size: .82rem;
  font-weight: 400;
  color: var(--fg-dim, #999);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-accordion-arrow {
  flex-shrink: 0;
  font-size: .9rem;
  transition: transform .2s;
  color: var(--fg-dim, #888);
}
.link-accordion[open] > .link-accordion-header .link-accordion-arrow {
  transform: rotate(180deg);
}
.link-accordion-body {
  padding: 0 12px 12px;
}
.link-accordion-body .hwitem {
  border-radius: 10px;
}
/* 亮色主題微調 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .link-accordion {
    background: rgba(0,0,0,0.03);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      0 2px 6px rgba(0,0,0,0.08);
  }
  :root:not([data-theme="dark"]) .link-accordion-count {
    background: rgba(0,0,0,0.08);
    color: #555;
  }
}
:root[data-theme="light"] .link-accordion {
  background: rgba(0,0,0,0.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 6px rgba(0,0,0,0.08);
}
:root[data-theme="light"] .link-accordion-count {
  background: rgba(0,0,0,0.08);
  color: #555;
}

/* 學習連結：分頁面、排序工具列與分頁器 */
.links-sub-tabs {
  margin-top: 14px;
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.links-sub-tabs .sub-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted, #9da8be);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
}
.links-sub-tabs .sub-tab:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.links-sub-tabs .sub-tab.active {
  background: rgba(132, 245, 234, 0.12);
  border-color: rgba(132, 245, 234, 0.35);
  color: #84f5ea;
  font-weight: 600;
}
.links-sub-tabs .sub-tab .pill-count {
  font-size: 0.76rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: inherit;
}
.links-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.links-toolbar-search {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.links-toolbar-search input {
  max-width: 320px;
  width: 100%;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: var(--text, #eee);
}
.links-toolbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.links-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--muted, #9da8be);
}
.links-control-group select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(20,25,35,0.85);
  color: var(--text, #eee);
  font-size: 0.88rem;
  outline: none;
  cursor: pointer;
}
.links-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.links-page-btn {
  min-width: 34px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.links-page-btn.active {
  background: rgba(132, 245, 234, 0.2);
  border-color: #84f5ea;
  color: #84f5ea;
  font-weight: 600;
}
.btn.danger-hover:hover {
  background: rgba(255, 80, 80, 0.15) !important;
  color: #ff6b6b !important;
  border-color: rgba(255, 80, 80, 0.4) !important;
}

:root[data-theme="light"] .links-sub-tabs .sub-tab {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
  color: #555;
}
:root[data-theme="light"] .links-sub-tabs .sub-tab.active {
  background: rgba(0, 150, 136, 0.1);
  border-color: rgba(0, 150, 136, 0.4);
  color: #00796b;
}
:root[data-theme="light"] .links-toolbar {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.06);
}
:root[data-theme="light"] .links-toolbar-search input,
:root[data-theme="light"] .links-control-group select {
  background: #fff;
  border-color: #ccc;
  color: #222;
}

/* 學習連結：卡片網格與自動縮圖卡片 */
.links-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 14px;
}
.link-card.hwitem {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.link-card.hwitem:hover {
  transform: translateY(-4px);
  border-color: rgba(132, 245, 234, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 0 16px rgba(132, 245, 234, 0.12);
}
.link-card-thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle at 50% 50%, rgba(30, 40, 60, 0.9), rgba(12, 16, 26, 0.98));
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
}
.link-card-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted, #8a99ad);
  font-size: 0.82rem;
  background: linear-gradient(135deg, rgba(25, 30, 45, 0.9), rgba(15, 18, 28, 0.95));
  z-index: 1;
}
.link-card-placeholder-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  opacity: 0.85;
}
.link-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 2;
  opacity: 0;
  transition: opacity .35s ease, transform .3s ease;
}
.link-card-thumb.loaded {
  opacity: 1;
}
.link-card.hwitem:hover .link-card-thumb {
  transform: scale(1.04);
}
.link-card-badge-layer {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  pointer-events: none;
}
.link-card-external-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  opacity: 0;
  transform: scale(0.8);
  transition: all .2s ease;
}
.link-card.hwitem:hover .link-card-external-indicator {
  opacity: 1;
  transform: scale(1);
}
.link-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.link-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.link-card-favicon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}
.link-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg, #f0f4f8);
  margin: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-card-desc {
  font-size: 0.88rem;
  color: var(--muted, #9da8be);
  line-height: 1.45;
  margin: 4px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.link-card-domain {
  font-size: 0.78rem;
  color: var(--fg-dim, #718096);
  margin-top: auto;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] .link-card.hwitem {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .link-card.hwitem:hover {
  border-color: rgba(0, 150, 136, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
:root[data-theme="light"] .link-card-thumb-placeholder {
  background: #eef2f6;
  color: #555;
}
:root[data-theme="light"] .link-card-title {
  color: #1a202c;
}
:root[data-theme="light"] .link-card-desc {
  color: #4a5568;
}
:root[data-theme="light"] .link-card-footer {
  border-top-color: rgba(0, 0, 0, 0.06);
}



/* Modal layout */
.work-modal-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 95%;
  max-width: 1000px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

.work-modal-left {
  flex: 2;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #000;
}

.work-modal-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  min-width: 300px;
}

/* Comments layout */
.comment-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.comment-body {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  flex: 1;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.comment-meta .time {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.comment-text {
  font-size: 0.95rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

.del-comment {
  color: #ff4a4a;
  cursor: pointer;
}

.del-comment:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .work-modal-box {
    flex-direction: column;
  }
  .work-modal-left {
    min-height: 40vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--text-muted);
  flex-shrink: 0;
}
.author-dot {
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
}

.carousel-prev, .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.carousel-prev:hover, .carousel-next:hover {
  background: rgba(0,0,0,0.7);
  color: white;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.featured-stage:hover .carousel-prev,
.featured-stage:hover .carousel-next {
  opacity: 1;
}
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }
/* Book Editor */
.book-editor-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-top: 16px;
}
.book-sidebar {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.book-sidebar-header {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.book-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.book-chapter-item {
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.book-chapter-item:hover {
  border-color: rgba(255,255,255,0.4);
}
.book-chapter-item.active {
  background: rgba(159, 249, 239, 0.1);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: bold;
}
.book-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.book-content-editor {
  min-height: 500px;
  resize: vertical;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1.6;
}
.book-viewer-container {
  max-width: 800px;
  margin: 0 auto;
}
.book-viewer-chapter {
  margin-top: 32px;
}
.book-viewer-title {
  margin-bottom: 24px;
  color: var(--primary);
  font-size: 2rem;
}
.book-viewer-content {
  font-size: 1.15rem;
  line-height: 1.8;
  white-space: pre-wrap;
  color: #ddd;
}

.p5-camera-notice{margin-top:10px;padding:10px 12px;border:1px solid rgba(255,191,100,.35);border-radius:12px;background:rgba(255,191,100,.08);color:var(--text)}

.featured-p5-host{background:radial-gradient(ellipse at 35% 35%,rgba(39,142,160,.18),transparent 48%),radial-gradient(ellipse at 74% 67%,rgba(112,67,200,.16),transparent 48%),#10131c}
.featured-p5-host[data-state="error"] iframe{opacity:0}
.featured-p5-host[data-permission-blocked="true"] .featured-p5-status{opacity:1;pointer-events:none}