.ex-card { width:min(100%,470px); display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.ex-kicker { color:#9999a4; font:10px var(--font-mono); letter-spacing:.16em; }
.ex-card h3 { font-size:clamp(21px,2.5vw,30px); letter-spacing:-.035em; }
.ex-description { max-width:40ch; color:var(--stage-muted); font-size:12px; line-height:1.7; }
.ex-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.ex-button,.ex-icon-button,.ex-drag-handle { padding:11px 18px; color:#f5f5f7; background:#ffffff0d; border:1px solid #ffffff26; border-radius:12px; font-size:12px; }
.ex-button:active { transform:scale(.97); }
.ex-primary { background:#e9efff; color:#172331; }
.ex-button:disabled,.ex-icon-button:disabled { opacity:.4; cursor:default; }
.ex-status { font-size:18px; }
.ex-caption { font-size:11px; color:#a6a6af; line-height:1.7; }
.ex-state-symbol { display:grid; place-items:center; width:88px; height:88px; border:1px solid #ffffff25; border-radius:26px; font-size:42px; color:#84b8ff; background:#ffffff08; }
.ex-card[data-state="success"] .ex-state-symbol { color:#66dfb0; }
.ex-card[data-state="error"] .ex-state-symbol { color:#ff8b9a; }
.ex-progress { width:min(100%,280px); height:4px; background:#ffffff14; border-radius:20px; overflow:hidden; }
.ex-progress span { display:block; height:100%; background:#79b4ff; transform:scaleX(0); transform-origin:left; }
.ex-sort { position:relative; width:100%; height:260px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; list-style:none; text-align:left; }
.ex-sort-row { height:58px; display:flex; align-items:center; gap:10px; padding:5px 8px; border-bottom:1px solid #ffffff0c; background:#212124; border-radius:10px; }
.ex-sort-row.is-dragging { z-index:3; position:relative; background:#343440; box-shadow:0 12px 32px #0005; }
.ex-sort-position { color:#8e91a0; font:10px var(--font-mono); }
.ex-sort-label { flex:1; font-size:12px; }
.ex-icon-button { padding:7px; }
.ex-drag-handle { touch-action:none; cursor:grab; padding:7px; font-size:18px; background:none; border:0; }
.ex-morph { width:160px; height:160px; color:#7ab7ff; }
.ex-number { font-size:clamp(40px,6vw,76px); letter-spacing:-.05em; font-variant-numeric:tabular-nums; line-height:1.2; min-width:7ch; }
.ex-trend { font-size:12px; color:#a6a6af; }
.ex-trend[data-direction="up"] { color:#68dbac; }
.ex-trend[data-direction="down"] { color:#ff9eae; }
.ex-layout { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; min-height:260px; align-content:start; }
.ex-layout-item { background:#ffffff08; border:1px solid #ffffff16; border-radius:14px; padding:14px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ex-layout-item strong { font-size:12px; }
.ex-layout-item small { font:8px var(--font-mono); color:#a6a6af; }
.ex-layout-dot { width:28px; height:28px; border-radius:9px; background:hsl(calc(200 + var(--i)*22) 65% 70%); }
.ex-layout[data-mode="list"] { grid-template-columns:1fr; gap:5px; }
.ex-layout[data-mode="list"] .ex-layout-item { flex-direction:row; padding:5px 12px; gap:12px; }
.ex-layout[data-mode="list"] small { margin-left:auto; }
.ex-media-frame { width:85%; aspect-ratio:16/9; overflow:hidden; border-radius:18px; background:#262936; }
.ex-media-frame.is-expanded { width:100%; }
.ex-art { position:relative; width:100%; height:100%; background:linear-gradient(140deg,#5162b3,#d59da9); overflow:hidden; transition:opacity 240ms; }
.ex-art[data-art="1"] { background:linear-gradient(150deg,#174958,#b2cba3); }
.ex-art[data-art="2"] { background:linear-gradient(150deg,#694735,#d7ad73); }
.ex-art i { position:absolute; width:55%; height:130%; background:#ffffff29; border:1px solid #ffffff44; border-radius:50%; transform:rotate(-35deg); left:12%; top:12%; }
.ex-art i:nth-child(2) { left:44%; top:-42%; background:#ffffff17; }
.ex-art i:nth-child(3) { width:18%; height:28%; left:65%; top:55%; background:#fff9; box-shadow:0 20px 50px #0003; }
.ex-art.is-preparing { opacity:.25; }
.ex-thumbs { display:flex; gap:8px; }
.ex-thumbs button { padding:7px 16px; font:10px var(--font-mono); }
.ex-thumbs button[aria-pressed="true"] { border-color:#8fbdff; color:#a9cfff; }
.ex-story { width:100%; height:300px; overflow-y:auto; overscroll-behavior:contain; position:relative; border:1px solid #ffffff14; border-radius:16px; scrollbar-width:thin; }
.ex-story-sticky { position:sticky; top:0; height:130px; z-index:1; background:#222228; display:grid; place-items:center; padding:8px; border-bottom:1px solid #ffffff12; }
.ex-story-sticky strong { font-size:11px; color:#b7bfdd; }
.ex-story-canvas { position:relative; width:180px; height:88px; }
.ex-story-canvas span { position:absolute; width:64px; height:64px; background:#649cf0aa; border:1px solid #b6d0ff88; border-radius:16px; left:25px; top:8px; }
.ex-story-canvas span:nth-child(2) { left:60px; background:#a88affaa; }
.ex-story-canvas span:nth-child(3) { left:95px; background:#f9b6d1aa; }
.ex-story-content section { min-height:220px; display:flex; flex-direction:column; justify-content:center; padding:28px; gap:14px; }
.ex-story-content h4 { font-size:15px; }.ex-story-content p { font-size:12px; line-height:1.8; color:#b0b0bd; }
@media(max-width:500px) { .ex-card { gap:12px; } .ex-sort-label { font-size:11px; } .ex-sort-row { gap:6px; } .ex-layout-item { padding:10px 4px; } }
.study-stage:has(.ex-card) { overflow-y:auto; align-items:safe center; }
@media(max-width:980px) {
  .sheet-stage-wrap:has(.ex-card) { height:auto; min-height:0; }
  .study-stage:has(.ex-card) { min-height:500px; flex:none; }
}