/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

@font-face{font-family:Pretendard;src:url("assets/fonts/PretendardVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --font:Pretendard,system-ui,sans-serif;
  --space:8px;
  --radius:12px;
  --radius-lg:16px;
  --motion:200ms;
  --sidebar:240px;
  --header:64px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.56 var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea{outline-offset:3px}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
h1,h2,h3,p,dl,dd,dt,figure{margin:0}
h1{font-size:40px;line-height:1.3;letter-spacing:-.03em;font-weight:700}
h2{font-size:24px;line-height:1.35;letter-spacing:-.02em;font-weight:700}
h3{font-size:18px;line-height:1.45;font-weight:700}
small,.small{font-size:13px}
.muted{color:var(--color-cool-neutral-40)}
.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:700;text-transform:uppercase}
.stack{display:grid;gap:24px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grid2{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

.topbar{height:var(--header);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:32px;padding:0 32px;position:sticky;top:0;background:var(--bg);z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;letter-spacing:-1px;min-width:176px}
.brandmark{width:28px;height:28px;background:var(--accent);clip-path:polygon(15% 0,80% 9%,100% 68%,70% 100%,5% 80%,0 28%)}
.topnav{display:flex;align-items:center;gap:32px;height:100%;font-size:14px;font-weight:600}
.topnav a{height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}
.topnav a.active{border-color:var(--fg)}
.toptools{margin-left:auto;display:flex;align-items:center;gap:16px}
.searchkey{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 12px;color:var(--color-cool-neutral-40);font-size:13px;display:flex;align-items:center;gap:12px}
.searchkey kbd{font:inherit;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 6px}
.avatar{width:32px;height:32px;background:var(--fg);color:var(--bg);border:0;border-radius:50%;font-size:12px}

.sidebar{position:fixed;top:var(--header);bottom:0;width:var(--sidebar);border-right:1px solid var(--border);padding:32px 24px;overflow:auto;display:flex;flex-direction:column;background:var(--bg);z-index:15}
.sidegroup{margin-bottom:28px}
.sidecaption{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--color-cool-neutral-50);margin:0 12px 10px}
.sideitem{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:14px;border-radius:8px;margin:2px 0;width:100%;text-align:left;border:0;background:none}
.sideitem.sub{padding-left:40px}
.sideitem.active{background:var(--color-emerald-95);font-weight:650;color:var(--color-emerald-10)}
.sidefoot{margin-top:auto;padding-top:36px;font-size:12px;color:var(--color-cool-neutral-40)}
.sidefoot p{margin-top:16px}

.main{margin-left:var(--sidebar);padding:48px clamp(24px,5vw,80px) 96px;max-width:1600px}
.crumb{font-size:13px;color:var(--color-cool-neutral-40);margin-bottom:28px}
.pagehead{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:32px}
.pagehead p{color:var(--color-cool-neutral-40);margin-top:12px;max-width:680px}

.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid var(--border);background:var(--bg);padding:9px 18px;border-radius:var(--radius);min-height:44px;font-size:14px;font-weight:600;white-space:nowrap;transition:background var(--motion),border-color var(--motion),opacity var(--motion)}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--fg)}
.btn.dark{background:var(--fg);color:var(--bg);border-color:transparent}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent}
.btn.small{min-height:36px;padding:6px 12px;font-size:13px;border-radius:10px}
.btn.large{min-height:52px;padding:14px 22px;font-size:16px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.full{width:100%}
.btn.is-disabled{opacity:.45}
.btn.is-hover{background:var(--color-interaction-neutral-hover)}
.btn.primary.is-hover{background:var(--color-primary-strong)}
.btn.dark.is-hover{background:var(--color-cool-neutral-25)}
.btn.is-focus{outline:2px solid var(--fg);outline-offset:2px}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon.spin{animation:od-spin 900ms linear infinite}
@keyframes od-spin{to{transform:rotate(360deg)}}

.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:48px}
.hero h1{font-size:clamp(36px,3.4vw,52px);line-height:1.18;letter-spacing:-.045em;margin:20px 0}
.hero p{max-width:440px;color:var(--color-cool-neutral-40)}
.hero-actions{margin-top:28px}
.specimen{display:grid;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.specimen-row{display:grid;gap:12px;padding:20px 24px;border-bottom:1px solid var(--border)}
.specimen-row:last-child{border-bottom:0}
.specimen-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-cool-neutral-50)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{width:44px;height:44px;border-radius:8px;border:1px solid var(--border)}
.specimen-type{display:flex;align-items:baseline;gap:12px}
.specimen-type strong{font-size:34px;letter-spacing:-.03em}
.specimen-type span{font-size:13px;color:var(--color-cool-neutral-40)}

.section{margin-top:40px}
.sectiontitle{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.sectiontitle a{font-size:13px;display:flex;align-items:center;gap:8px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{display:block;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;color:var(--fg);text-decoration:none;background:var(--bg)}
.cardbody{padding:20px}
.cardbody p{font-size:14px;color:var(--color-cool-neutral-40);margin-top:8px}
.sample{min-height:168px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:24px;gap:8px}
.sample .swatch{width:40px;height:64px;border-radius:8px}
.arrowlink{display:flex;justify-content:space-between;align-items:center;gap:12px}
.changelog{display:grid;grid-template-columns:112px 1fr auto;gap:20px;padding:20px 0;border-top:1px solid var(--border);font-size:14px}
.changelog .row{flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;white-space:nowrap}
.pill.green{background:var(--color-emerald-95);border-color:var(--color-emerald-80);color:var(--color-emerald-10)}
.pill.red{background:var(--color-red-95);border-color:var(--color-red-80);color:var(--color-red-30)}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:24px}
.input,select,textarea{border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:11px 12px;color:var(--fg);min-width:0}
.input{height:49px;border-radius:var(--radius-lg)}
select{min-height:49px}
textarea{width:100%;resize:vertical;min-height:76px}
.searchinput{flex:1 1 220px;min-width:0}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--border);margin-bottom:32px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:none;padding:12px 0;border-bottom:2px solid transparent;font-size:14px;white-space:nowrap;color:inherit}
.tab.active{border-color:var(--fg);font-weight:700}
.panel{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:var(--bg)}
.panel.flush{padding:0;overflow:hidden}
.panel + .panel,.panel + .grid2,.panel + .grid3,.panel + .notice{margin-top:24px}

.editor,.playground{display:grid;grid-template-columns:minmax(0,1fr) 300px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:8px}
.previewarea,.preview-pane{background:var(--surface);padding:24px;min-width:0}
.previewscroll{overflow:auto;padding:24px 0;min-height:280px}
.previewscroll iframe{display:block;border:0;background:transparent;margin:auto;max-width:none}
.preview-frame{border:1px dashed var(--color-cool-neutral-70);border-radius:var(--radius);background:var(--bg);padding:24px;overflow:auto}
.frame-inner{width:min(100%,var(--frame-w,1024px));margin:0 auto}
.editorpanel{border-left:1px solid var(--border);padding:20px;max-height:760px;overflow:auto;background:var(--bg)}
.editorpanel h3{margin-bottom:16px}
.field{display:grid;gap:6px;font-size:13px;margin-bottom:16px}
.field label{font-weight:600}
.field input,.field select{width:100%}
.field input[type=color]{height:40px;padding:4px}
.field .btn{align-self:flex-start;justify-self:start}
.check{display:flex;gap:8px;align-items:center;font-size:13px;margin:4px 0 12px}
.check input{width:auto;height:auto}

.notice{padding:16px;background:var(--surface);border-radius:8px;font-size:13px;color:var(--color-cool-neutral-40)}
.notice.strong{border:1px solid var(--color-emerald-80);background:var(--color-emerald-99);color:var(--color-emerald-10);font-weight:600}
.error{color:var(--color-red-30);font-size:13px}
.hint{font-size:12px;color:var(--color-cool-neutral-40)}
.hint.error{color:var(--color-red-30)}
.req{color:var(--danger);margin-left:2px}
.inline-note{font-size:12px;color:var(--color-cool-neutral-40)}
.divider{border:0;border-top:1px solid var(--border);margin:24px 0}
.code{font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--surface);padding:20px;border-radius:8px}
.eventline{padding:16px 0;border-bottom:1px solid var(--border)}

.state-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px}
.state-sample{display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:8px;background:var(--bg);justify-items:start}
.state-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-cool-neutral-50)}
.field-preview{display:grid;gap:6px;max-width:420px}
.field-preview label{font-size:13px;font-weight:600}
.input.invalid{border-color:var(--danger)}
.input.is-focus{outline:2px solid var(--fg);outline-offset:2px}

.mini-main,.mini-promo{display:grid;gap:8px;justify-items:start;background:var(--color-emerald-95);padding:20px;border-radius:12px;max-width:260px}
.mini-promo{background:var(--surface);grid-template-columns:1fr auto;align-items:center;gap:12px}
.mini-copy{display:grid;gap:2px;justify-items:start}
.mini-main small,.mini-copy small{font-size:10px;letter-spacing:.08em;color:var(--color-cool-neutral-40)}
.mini-main strong{font-size:18px;line-height:1.3}
.mini-copy strong{font-size:14px}
.mini-cta{font-size:11px;border:1px solid currentColor;border-radius:6px;padding:4px 8px}
.mini-field{display:grid;gap:4px;justify-items:start}
.mini-label{font-size:12px;font-weight:600}
.mini-input{display:block;width:200px;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--color-cool-neutral-40);background:var(--bg)}

.empty{text-align:center;padding:72px 24px;border:1px dashed var(--border);border-radius:var(--radius)}
.empty h2{margin:16px 0 8px}
.empty p{color:var(--color-cool-neutral-40);margin-bottom:24px}

.listbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0}
.assetgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.asset{position:relative}
.assetcheck{position:absolute;top:12px;left:12px;z-index:1;width:20px;height:20px;height:20px;accent-color:var(--fg)}
.asset img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:var(--surface)}
.filethumb{display:flex;align-items:center;gap:8px;padding:16px;background:var(--surface);aspect-ratio:3/2;color:var(--color-cool-neutral-40);font-size:13px;word-break:break-all}
.assetmeta{padding:16px;display:block}
.assetmeta h3{font-size:15px}
.assetmeta p{font-size:12px;color:var(--color-cool-neutral-40);margin-top:8px}
.assetlist{display:grid;gap:12px}
.assetlist .asset{display:grid;grid-template-columns:160px 1fr}
.assetlist .asset img,.assetlist .asset .filethumb{width:160px;height:120px}

.detailgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px}
.meta{display:grid;grid-template-columns:88px 1fr;gap:16px;font-size:14px}
.meta dt{color:var(--color-cool-neutral-40)}
.meta dd{margin:0;overflow-wrap:anywhere}
.note-body{margin-top:12px}

.uploadgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}
.drop{border:1px dashed var(--color-cool-neutral-70);border-radius:var(--radius);padding:40px 24px;text-align:center;background:var(--surface)}
.drop.over{background:var(--color-emerald-95);border-color:var(--accent)}
.drop p{font-size:13px;margin:8px 0 16px;color:var(--color-cool-neutral-40)}
.queue{display:grid;margin-top:12px}
.queue-empty{padding:16px 0}
.fileitem{display:grid;grid-template-columns:24px 48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 12px;border-bottom:1px solid var(--border);cursor:pointer}
.fileitem.active{background:var(--color-emerald-99)}
.fileitem img{width:48px;height:48px;object-fit:contain;border-radius:4px;background:var(--surface)}
.fileicon{width:48px;height:48px;display:grid;place-items:center;background:var(--surface);border-radius:4px;color:var(--color-cool-neutral-40)}
.fileitem .od-field strong{font-size:14px}
.fileitem input[type=checkbox]{width:auto;height:auto;accent-color:var(--fg)}
.fileitem p{font-size:12px;color:var(--color-cool-neutral-40)}
progress{width:100%;height:6px;accent-color:var(--accent)}

.node-list{display:grid;margin-top:16px;border-top:1px solid var(--border)}
.node-item{display:flex;gap:12px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--border);cursor:pointer}
.node-item input{width:auto;height:auto;accent-color:var(--fg)}
.node-meta{display:grid;gap:2px}
.node-meta strong{font-size:14px}
.node-meta span{font-size:12px;color:var(--color-cool-neutral-40)}

.modalback{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{width:min(720px,100%);max-height:90vh;overflow:auto;background:var(--bg);border-radius:var(--radius-lg);padding:32px;box-shadow:0 24px 80px #0002}
.modalhead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:12px 24px;border-radius:var(--radius);z-index:150;font-size:14px;max-width:90vw}

.demotool{position:fixed;bottom:16px;right:16px;z-index:25;font-size:11px}
.demotool summary{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 12px;cursor:pointer;list-style:none}
.demotool summary::-webkit-details-marker{display:none}
.demotool div{display:grid;gap:4px;background:var(--bg);padding:12px;border:1px solid var(--border);border-radius:8px;max-width:240px;margin-top:6px}
.demotool button{font-size:12px;border:0;background:var(--surface);padding:8px;text-align:left;border-radius:4px;min-height:auto}

.login{max-width:440px;margin:64px auto}
.swatchgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.swatchbox{height:88px;border-radius:8px;border:1px solid var(--border)}
.tokentable{width:100%;border-collapse:collapse;font-size:14px}
.tokentable th,.tokentable td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--border)}
.mobilemenu{display:none}

@media(hover:hover){
  .btn:hover{background:var(--color-interaction-neutral-hover)}
  .btn.primary:hover{background:var(--color-primary-strong)}
  .btn.dark:hover{background:var(--color-cool-neutral-25)}
  .btn.danger:hover{background:var(--color-red-40)}
  .sideitem:hover{background:var(--surface)}
  .card:hover{border-color:var(--color-cool-neutral-60)}
  .topnav a:hover{border-color:var(--border)}
  .node-item:hover{background:var(--surface)}
}

@media(min-width:1440px){.hero{gap:64px}}

@media(max-width:1023px){
  :root{--sidebar:200px}
  .sidebar{width:200px;padding:24px 16px}
  .main{margin-left:200px;padding:32px 24px 96px}
  .topbar{gap:20px;padding:0 24px}
  .topnav{gap:20px}
  .brand{min-width:156px}
  .cards,.assetgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr}
  .editor,.playground,.detailgrid,.uploadgrid,.grid2,.grid3{grid-template-columns:1fr}
  .editorpanel{border-left:0;border-top:1px solid var(--border);max-height:none}
  .toptools .searchkey{display:none}
}

@media(max-width:767px){
  .topbar{padding:0 20px;gap:12px}
  .brand{font-size:22px;min-width:0}
  .topnav{display:none}
  .mobilemenu{display:inline-flex}
  .sidebar{display:none;width:240px;box-shadow:20px 0 40px #0002}
  .sidebar.open{display:flex}
  .main{margin-left:0;padding:28px 20px 96px}
  .hero{gap:28px}
  .hero h1{font-size:34px}
  .pagehead{flex-direction:column;gap:16px}
  h1{font-size:30px}
  .cards,.catalog,.assetgrid{grid-template-columns:1fr}
  .swatchgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .changelog{grid-template-columns:1fr;gap:8px}
  .previewarea,.preview-pane{padding:16px}
  .editorpanel{padding:16px}
  .modal{padding:24px}
  .modalback{padding:12px}
  .assetlist .asset{grid-template-columns:112px 1fr}
  .assetlist .asset img,.assetlist .asset .filethumb{width:112px;height:96px}
  .tokentable{font-size:12px}
  .toptools{gap:8px}
  .fileitem{grid-template-columns:20px 40px minmax(0,1fr)}
  .fileitem .pill{grid-column:3}
  .sample{min-height:160px}
  .demotool{right:12px;bottom:12px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
.main-sample{width:199px;height:214px;overflow:hidden;flex:none}
.main-sample .crouton-main{transform:scale(.5);transform-origin:top left}
.editor label:has(#main-card-width),.editor label:has(#main-card-height){display:block;margin:12px 0}
#main-card-width,#main-card-height{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font:inherit;background:white}

.plugin-guide{max-width:960px}.plugin-guide h2{margin:16px 0}.plugin-guide ol{padding-left:24px}.plugin-guide li{margin:12px 0;line-height:1.8}.plugin-guide p{line-height:1.8}.plugin-guide details{padding:16px 0;border-bottom:1px solid var(--border)}.plugin-guide summary{cursor:pointer;font-weight:600}.plugin-guide code{overflow-wrap:anywhere}

.platform-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.platform-upload-grid .drop{padding:24px 12px}.platform-upload-grid h3{margin:12px 0 4px}@media(max-width:700px){.platform-upload-grid{grid-template-columns:1fr}}