@layer studio {
  .preview-content.checker-content { padding:0;overflow:hidden;align-items:stretch;justify-items:stretch; }.preview-content .texture-checker-canvas { width:100%;height:100%;min-height:360px;max-height:none;max-width:none;border-radius:0;box-shadow:none;touch-action:none;cursor:grab; }.texture-checker-canvas:active { cursor:grabbing; }.texture-checker-canvas:focus-visible { outline:3px solid #146ef5;outline-offset:-3px; }.checker-generator-link { color:#174d88;font-size:13px;text-underline-offset:3px; }
  .studio-page [hidden] { display: none !important; }
  .studio-page { --accent:#146ef5; --muted:#565c65; --faint:#636b76; height:100dvh; overflow:hidden; background:#f5f5f7; }
  .studio-page :focus-visible { outline-color: rgba(107,31,31,.42); }
  .studio-topbar { position:relative; z-index:20; display:flex; justify-content:space-between; align-items:center; height:68px; padding:0 22px; border-bottom:1px solid var(--line); background:#fafafc; }
  .studio-topbar .brand small { margin-left: 3px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--faint); font-size: 11px; font-weight: 560; }
  .studio-topbar > .button { justify-self: end; }

  .studio-shell { display: grid; grid-template-columns: 226px minmax(0,1fr) 320px; height: calc(100dvh - 68px); }
  .studio-shell.materials-mode { grid-template-columns: 226px minmax(0,1fr); }
  .studio-nav { display: flex; flex-direction: column; min-height: 0; padding: 20px 12px; border-right: 1px solid var(--line); background: #ebe8e1; }
  .nav-heading { display: flex; justify-content: space-between; padding: 0 10px 14px; color: var(--faint); font: 10px "Cascadia Code", monospace; letter-spacing: .12em; text-transform: uppercase; }
  .studio-nav nav { display: grid; gap: 3px; overflow: auto; }
  .studio-nav button { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 9px; width: 100%; padding: 9px 9px 9px 7px; border: 0; border-left: 2px solid transparent; border-radius: 0; color: var(--muted); background: transparent; text-align: left; font-size: 12px; transition: background .18s,color .18s,border-color .18s; }
  .nav-tool-icon { display: grid; place-items: center; width: 34px; height: 34px; color: var(--faint); }
  .nav-tool-label { min-width: 0; line-height: 1.25; }
  .studio-nav button:hover { color: var(--ink); background: rgba(255,255,255,.42); }
  .studio-nav button.active { color: var(--ink); border-left-color: var(--accent); background: #f2f1ed; }.studio-nav button.active .nav-tool-icon { color: var(--accent); }
  .studio-tool-svg { width: 24px; height: 24px; overflow: visible; }
  .studio-nav button.active .studio-tool-svg g { animation: tool-icon-trace .55s cubic-bezier(.2,.7,.2,1) both; }
  .local-note { margin-top: auto; padding: 18px 10px 2px; border-top: 1px solid var(--line); }.local-note strong { font-size: 22px; letter-spacing: -.04em; }.local-note p { margin-top: 6px; color: var(--faint); font-size: 10px; line-height: 1.45; }

  .workbench { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; background-color: #f2f1ed; background-image: linear-gradient(rgba(49,56,67,.04) 1px, transparent 1px),linear-gradient(90deg,rgba(49,56,67,.04) 1px,transparent 1px); background-size: 28px 28px; }
  .workbench-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 78px; padding: 13px 22px; border-bottom: 1px solid var(--line); background: rgba(242,241,237,.92); }
  .tool-identity { display: flex; align-items: center; gap: 13px; }.tool-icon-large { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent); border-right: 1px solid var(--line); }.tool-icon-large .studio-tool-svg { width: 29px; height: 29px; }.tool-identity p { margin-bottom: 2px; color: var(--faint); font-size: 10px; }.tool-identity h1 { font-size: 20px; letter-spacing: -.035em; font-weight: 640; }.tool-identity.entering { animation: tool-title-arrive .38s cubic-bezier(.2,.7,.2,1) both; }.tool-identity.entering .studio-tool-svg g { animation: tool-icon-trace .58s .08s cubic-bezier(.2,.7,.2,1) both; }
  .file-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; color: var(--faint); }.file-meta strong { max-width: 240px; overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }.file-meta small { font: 9px "Cascadia Code",monospace; }
  .workbench-stage { min-width: 0; min-height: 0; padding: clamp(18px,3vw,42px); overflow: auto; }
  .drop-zone { display: grid; place-items: center; align-content: center; width: 100%; height: 100%; min-height: 420px; border: 1px dashed rgba(36,43,54,.26); border-radius: 6px; background: rgba(255,255,255,.2); text-align: center; transition: border .2s,background .2s; }
  .drop-zone:hover, .drop-zone.dragging { border-color: var(--accent); background: rgba(255,255,255,.48); }.drop-mark { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 22px; color: var(--accent); border-bottom: 1px solid var(--line); }.drop-mark .studio-tool-svg { width: 38px; height: 38px; }.drop-zone strong { font-size: 24px; letter-spacing: -.035em; }.drop-zone p { margin: 8px 0 20px; color: var(--muted); font-size: 13px; }.drop-zone small { padding: 9px 14px; border-radius: 999px; color: white; background: var(--ink); font-weight: 650; }
  .preview-shell { display: grid; grid-template-rows: auto 1fr; width: 100%; height: 100%; min-height: 450px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.5); }
  .preview-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--faint); font: 9px "Cascadia Code", monospace; letter-spacing: .12em; }.preview-toolbar button { padding: 5px 8px; border: 0; color: var(--muted); background: transparent; font: inherit; }
  .preview-content { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 20px; overflow: auto; background: #e6e8eb; }
  .preview-content img, .preview-content canvas { display: block; max-width: 100%; max-height: 62vh; border-radius: 6px; box-shadow: 0 18px 50px rgba(23,29,38,.18); }
  .preview-content .document-preview { width: min(580px,100%); min-height: 420px; padding: 48px; background: white; box-shadow: 0 18px 50px rgba(23,29,38,.15); color: #2a2d32; font-family: Georgia, serif; line-height: 1.65; white-space: pre-wrap; }
  .tile-preview { display: grid; grid-template-columns: repeat(3,1fr); width: min(720px,100%); aspect-ratio: 1; overflow: hidden; border-radius: 4px; box-shadow: 0 18px 50px rgba(23,29,38,.2); }.tile-preview canvas { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }

  .method-control { min-width: 0; padding: 0; border: 0; }.method-control legend { margin-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 650; }.method-picker { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.method-picker label { position: relative; min-width: 0; cursor: pointer; }.method-picker input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; padding: 0; opacity: 0; clip-path: inset(50%); }.method-picker span { display: grid; place-items: center; gap: 5px; min-height: 70px; padding: 8px 3px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; color: var(--faint); background: rgba(255,255,255,.62); transition: color .18s, border-color .18s, background .18s, transform .18s; }.method-picker svg { width: 27px; height: 27px; transition: transform .28s cubic-bezier(.2,.8,.2,1); }.method-picker b { font-size: 9px; font-weight: 630; white-space: nowrap; }.method-picker label:hover span { color: var(--ink); transform: translateY(-2px); }.method-picker input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }.method-picker input:checked + span { color: white; border-color: var(--ink); background: var(--ink); box-shadow: 0 8px 24px rgba(27,32,40,.14); }.method-picker input:checked + span svg { transform: rotate(-4deg) scale(1.08); }.method-picker input:checked + span svg path, .method-picker input:checked + span svg rect, .method-picker input:checked + span svg circle { animation: icon-trace .45s ease both; }
  .view-control { display: flex; align-items: center; justify-content: space-between; }.view-control > span { color: var(--muted); font-size: 10px; font-weight: 650; }.icon-segments { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.7); }.icon-segments button { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: 7px; color: var(--faint); background: transparent; transition: color .16s, background .16s, transform .16s; }.icon-segments button:hover { color: var(--ink); }.icon-segments button.active { color: white; background: var(--ink); transform: scale(1.03); }.icon-segments svg { width: 18px; height: 18px; }
  .advanced-controls { overflow-x: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.advanced-controls summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px 13px 1px; color: var(--muted); font-size: 10px; font-weight: 650; cursor: pointer; list-style: none; }.advanced-controls summary::-webkit-details-marker { display: none; }.advanced-controls summary b { font-size: 17px; font-weight: 350; transition: transform .2s; }.advanced-controls[open] summary b { transform: rotate(45deg); }.advanced-body { display: grid; gap: 14px; min-width: 0; padding: 3px 0 15px; animation: advanced-in .2s ease both; }.crop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; min-width: 0; }.crop-grid input { min-width: 0; padding: 8px; font-size: 10px; text-align: center; }
  .seamless-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: 100%; padding: clamp(16px,3vw,34px); isolation: isolate; }.seamless-stage.entering { animation: canvas-arrive .32s cubic-bezier(.2,.8,.2,1) both; }.canvas-chip { position: absolute; z-index: 3; top: 14px; left: 14px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.32); border-radius: 8px; color: white; background: rgba(20,24,30,.68); backdrop-filter: blur(12px); font: 8px "Cascadia Code",monospace; letter-spacing: .12em; }.seamless-surface { display: grid; place-items: center; width: min(720px,100%); max-height: 62vh; overflow: hidden; border-radius: 8px; box-shadow: 0 24px 64px rgba(22,28,37,.22); }.seamless-surface:not(.tile-preview) canvas { width: auto; max-width: 100%; max-height: 62vh; object-fit: contain; }.seamless-surface.tile-preview { grid-template-columns: repeat(3,1fr); width: min(720px,100%); aspect-ratio: 1; }.seamless-surface.tile-preview canvas { width: 100%; height: 100%; object-fit: cover; }.seamless-surface.guide-red canvas { outline: 1px solid rgba(255,40,52,.9); outline-offset: -1px; }.seamless-surface.guide-blue canvas { outline: 1px solid rgba(20,118,255,.9); outline-offset: -1px; }.seamless-surface.guide-green canvas { outline: 1px solid rgba(20,190,103,.9); outline-offset: -1px; }.render-scan { position: absolute; z-index: 4; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(transparent,rgba(255,255,255,.9),transparent); box-shadow: 0 0 24px rgba(255,255,255,.8); pointer-events: none; animation: render-scan .7s ease-out both; }.preview-shell.rendering .preview-content::after { content:""; position:absolute; inset:0; z-index:5; background:rgba(230,232,235,.18); backdrop-filter:blur(2px); pointer-events:none; }

  .inspector { display: grid; grid-template-rows: auto minmax(0,1fr) auto auto; min-height: 0; padding: 0 18px 18px; border-left: 1px solid var(--line); background: #ebe8e1; }
  .inspector > header { display: flex; align-items: center; justify-content: space-between; min-height: 78px; margin-inline: -18px; padding: 0 18px; border-bottom: 1px solid var(--line); }.inspector header p { font-size: 13px; font-weight: 650; }.inspector header span { display: block; margin-top: 2px; color: var(--faint); font-size: 10px; }
  #studioForm { align-content: start; display: grid; gap: 15px; padding: 20px 2px; overflow: auto; }.control { display: grid; gap: 7px; }.control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.control label, .control > span { color: var(--muted); font-size: 10px; font-weight: 650; }.control output { justify-self: end; color: var(--faint); font: 9px "Cascadia Code", monospace; }.control-head { display: flex; justify-content: space-between; }.control input[type="range"] { min-height: auto; padding: 0; accent-color: var(--ink); }.toggle-control input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; padding: 0; accent-color: var(--accent); }.toggle-control { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
  .process-state { min-height: 38px; color: var(--muted); font-size: 10px; line-height: 1.4; }.process-state.working { padding-left: 15px; border-left: 2px solid var(--accent); }.process-state.error { color: var(--danger); }.process-state.success { color: var(--success); }
  .process-button { width: 100%; }

  .studio-nav,.inspector { background:#eef0f3; }
  .workbench,.studio-nav button.active { background-color:#f5f5f7; }
  .workbench-head { background:#f8f9fa; }
  .studio-page :focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
  .vector-workbench,.ocr-workbench { display:grid;gap:18px;align-content:start;width:100%;min-width:0;align-self:stretch; }
  .vector-toolbar { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px; }
  .preview-tabs { display:flex;gap:2px;padding:3px;background:#d9dee5;border-radius:8px; }
  .preview-tabs button { min-height:36px;padding:6px 12px;border:0;border-radius:6px;background:transparent;color:#465260;font-size:13px; }
  .preview-tabs button[aria-pressed="true"] { background:white;color:var(--ink); }
  .preview-zoom { display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted); }
  .preview-zoom input { width:90px;min-height:24px;padding:0;accent-color:var(--accent); }
  .preview-zoom output { min-width:38px;text-align:right; }
  .vector-canvases { display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0; }
  .vector-canvases figure { margin:0;min-width:0;display:grid;grid-template-rows:auto 1fr; }
  .vector-canvases figcaption { padding:8px 0;color:#465260;font-size:13px;font-weight:600; }
  .vector-image-scroll { overflow:auto;height:42vh;min-height:230px;background-color:white;background-image:conic-gradient(#e8ebef 25%,transparent 0 50%,#e8ebef 0 75%,transparent 0);background-size:16px 16px;border:1px solid #cbd1da;border-radius:6px; }
  .preview-content .vector-canvases img { max-width:none;max-height:none;min-width:50%;height:auto;box-shadow:none;border-radius:0; }
  .vector-canvases[data-view="original"],.vector-canvases[data-view="vector"] { grid-template-columns:1fr; }
  .vector-canvases[data-view="original"] .vector-output,.vector-canvases[data-view="vector"] .vector-original { display:none; }
  .vector-placeholder { padding:28px;font-size:14px;color:var(--muted); }
  .preview-export { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px; }
  .preview-export .result-summary { flex:1;min-width:200px;margin:0;border-radius:6px; }
  .preview-export a[aria-disabled] { pointer-events:none;background:#636b76; }
  .ocr-workbench > label { color:var(--ink);font-size:14px;font-weight:600; }
  .ocr-workbench textarea { width:100%;min-height:38vh;resize:vertical;padding:20px;border:1px solid #cbd1da;border-radius:6px;background:white;font-family:inherit;font-size:15px;line-height:1.7;color:var(--ink); }
  .ocr-actions { display:flex;flex-wrap:wrap;gap:10px; }
  #ocrExportStatus { display:block;font-size:13px;color:var(--muted); }
  .print-hint { font-size:12px;line-height:1.5;color:var(--muted); }
  .materials-mode .preview-toolbar { display:none; }
  .materials-mode .preview-shell { grid-template-rows:1fr;border:0;background:transparent; }
  .materials-mode .preview-content { align-items:start;background:transparent;padding:0; }
  .materials-mode .workbench { background-image:none; }
  .materials-mode .material-card { border-radius:8px;box-shadow:none;transition:background .18s; }
  .materials-mode .material-card:hover { transform:none;box-shadow:none;background:white; }
  .materials-mode .material-card p { font-size:13px; }
  .materials-mode .material-card small { font-family:inherit;font-size:12px;line-height:1.5;text-transform:none; }
  .materials-mode .material-card strong { font-size:16px; }
  .materials-mode .materials-section-head h3 { margin:0;font-size:17px;letter-spacing:-.02em; }
  .materials-mode .contribution-panel { display:block;padding:16px 0;border:0;border-block:1px solid var(--line);background:transparent; }
  .contribution-panel > summary { cursor:pointer;font-size:16px;font-weight:600; }
  .contribution-panel[open] > .contribution-head { margin-block:18px; }
  .materials-mode .contribution-form label,.materials-mode .resource-card small { font-size:13px; }
  .materials-mode .resource-card strong { font-size:15px; }
  .materials-mode .contribution-head span { font-size:13px;margin:0; }
  .materials-mode .materials-empty { border:0;border-radius:6px;padding:16px;background:#eef0f3;font-size:13px; }
  @media(max-width:600px){.vector-toolbar { align-items:stretch; }.preview-tabs { flex:1; }.preview-tabs button { flex:1; }.vector-canvases { grid-template-columns:1fr; }.vector-image-scroll { height:30vh;min-height:180px; }.vector-workbench,.ocr-workbench { padding:12px; }.preview-export .button { width:100%; }.ocr-actions > * { flex:1; }}

  .result-drawer { position: fixed; z-index: 50; right: 22px; bottom: 22px; width: min(520px,calc(100% - 44px)); max-height: calc(100dvh - 44px); padding: 20px; overflow: auto; border: 1px solid rgba(255,255,255,.75); border-radius: 24px; background: rgba(249,250,251,.95); box-shadow: 0 32px 100px rgba(25,31,40,.25); backdrop-filter: blur(30px); animation: result-in .3s ease-out both; }.result-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.result-drawer-head p { color: var(--success); font: 9px "Cascadia Code", monospace; letter-spacing: .12em; text-transform: uppercase; }.result-drawer-head h2 { margin-top: 4px; font-size: 24px; letter-spacing: -.04em; }.result-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); gap: 1px; margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--line); }.result-summary div { padding: 13px; background: white; }.result-summary span { display: block; color: var(--faint); font-size: 9px; }.result-summary strong { display: block; margin-top: 7px; font-size: 16px; }.result-downloads { display: grid; gap: 8px; }.download-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: white; }.download-row strong { display: block; font-size: 12px; }.download-row small { color: var(--faint); font-size: 9px; }.ocr-output { width: 100%; min-height: 260px; margin-bottom: 12px; font-family: "Cascadia Code", monospace; font-size: 11px; line-height: 1.55; }

  .materials-workbench { align-content: start; display: grid; gap: 24px; width: 100%; }.materials-intro { max-width: 700px; }.materials-intro h2 { font-size: clamp(34px,5vw,66px); line-height: .95; letter-spacing: -.06em; }.materials-intro p { max-width: 60ch; margin-top: 17px; color: var(--muted); line-height: 1.55; }
  .material-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.material-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; color: var(--ink); background: rgba(255,255,255,.74); transition: transform .2s, box-shadow .2s; }.material-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(38,46,59,.13); }.material-card img { display: block; width: 100%; aspect-ratio: 1.45; object-fit: cover; }.material-card div { padding: 13px; }.material-card strong { display: block; font-size: 13px; }.material-card p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }.material-card small { display: block; margin-top: 10px; color: var(--faint); font: 8px "Cascadia Code", monospace; text-transform: uppercase; }
  .resource-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.resource-card { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.45); }.resource-card > span { display: grid; place-items: center; width: 42px; height: 42px; color: var(--accent); border-right: 1px solid var(--line); }.resource-card > span .studio-tool-svg { width: 23px; height: 23px; }.resource-card strong { display: block; font-size: 12px; }.resource-card small { color: var(--faint); font-size: 9px; }.resource-card b { color: var(--accent); font-size: 18px; font-weight: 400; }
  .published-community-materials { display: grid; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }.materials-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }.materials-section-head p { color: var(--faint); font: 9px "Cascadia Code",monospace; letter-spacing: .12em; }.materials-section-head h3 { margin-top: 5px; font-size: 21px; letter-spacing: -.035em; }.materials-section-head > span { color: var(--faint); font-size: 10px; }.community-material-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.materials-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; }.contribution-panel { display: grid; gap: 20px; padding: 22px; border: 1px solid rgba(107,31,31,.22); background: rgba(255,255,255,.48); }.contribution-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; }.contribution-head p { color: var(--accent); font: 9px "Cascadia Code",monospace; letter-spacing: .12em; }.contribution-head h3 { margin-top: 6px; font-size: 24px; letter-spacing: -.04em; }.contribution-head span { display: block; max-width: 50ch; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }.contribution-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 10px; }.contribution-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 650; }.contribution-form label > span { display: block; }.contribution-form input,.contribution-form select,.contribution-form textarea { min-height: 42px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.8); font: inherit; }.contribution-form textarea { min-height: 76px; resize: vertical; }.contribution-form input:focus,.contribution-form select:focus,.contribution-form textarea:focus { border-color: rgba(107,31,31,.55); box-shadow: 0 0 0 3px rgba(107,31,31,.08); outline: none; }.contribution-form small { color: var(--faint); font-size: 9px; font-weight: 400; line-height: 1.4; }.contribution-file { grid-column: 1 / -1; }.contribution-full { grid-column: 1 / -1; }.contribution-actions { display: flex !important; align-items: center; gap: 12px; }.contribution-actions span { color: var(--success); font-size: 10px; }.material-review-panel { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }.review-note { color: var(--muted); font-size: 11px; line-height: 1.45; }.review-row { display: grid; grid-template-columns: 86px 1fr; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); }.review-row > img { width: 86px; height: 86px; object-fit: cover; border-radius: 8px; background: #dfe2e5; }.review-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.review-row-head strong { font-size: 13px; }.review-row p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }.review-row small { display: block; margin-top: 7px; color: var(--faint); font-size: 9px; line-height: 1.4; }.review-row small a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }.review-status { flex: 0 0 auto; padding: 5px 7px; border-radius: 999px; font-size: 9px; }.review-pending { color: #70400f; background: rgba(206,143,54,.16); }.review-approved { color: var(--success); background: rgba(20,122,80,.12); }.review-rejected { color: var(--danger); background: rgba(180,35,24,.1); }.reviewer-note { color: var(--ink) !important; }.review-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }.review-actions .button { min-height: 34px; padding: 0 11px; font-size: 10px; }

  @media (max-width: 1100px) {
    .studio-shell { grid-template-columns: 76px minmax(0,1fr) 290px; }.studio-shell.materials-mode { grid-template-columns: 76px minmax(0,1fr); }.studio-nav { padding-inline: 8px; }.studio-nav button { grid-template-columns: 1fr; justify-items: center; padding: 8px 4px; border-left: 0; border-bottom: 2px solid transparent; font-size: 9px; text-align: center; }.studio-nav button.active { border-bottom-color: var(--accent); }.nav-tool-icon { width: 32px; height: 32px; }.local-note, .nav-heading span { display: none; }.nav-heading { justify-content: center; }.material-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  }
  @media (max-width: 780px) {
    .studio-page { height: auto; overflow: auto; }.studio-topbar { position: sticky; top: 0; grid-template-columns: 1fr auto; height: 64px; padding-inline: 14px; }.privacy-note { display: none; }.studio-topbar .button { font-size: 11px; }
    .studio-shell { display: grid; grid-template-columns: 1fr; height: auto; }.studio-nav { position: sticky; top: 64px; z-index: 15; display: block; padding: 7px; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--line); }.studio-nav .nav-heading, .local-note { display: none; }.studio-nav nav { display: flex; overflow-x: auto; }.studio-nav button { flex: 0 0 92px; gap: 4px; }
    .workbench { min-height: 650px; }.workbench-head { min-height: 70px; padding: 10px 14px; }.file-meta { display: none; }.workbench-stage { min-height: 520px; padding: 14px; }.drop-zone { min-height: 470px; }
    .inspector { min-height: 500px; border-top: 1px solid var(--line); border-left: 0; }.inspector > header { min-height: 65px; }.process-button { position: sticky; bottom: 10px; }
    .material-grid, .resource-list { grid-template-columns: 1fr; }.community-material-grid { grid-template-columns: 1fr; }.contribution-head { flex-direction: column; }.contribution-head .button { width: 100%; }.contribution-form { grid-template-columns: 1fr; }.contribution-file,.contribution-full { grid-column: 1; }.contribution-actions { align-items: stretch; flex-direction: column; }.contribution-actions .button { width: 100%; }.review-row { grid-template-columns: 64px 1fr; }.review-row > img { width: 64px; height: 64px; }.review-row-head { align-items: start; flex-direction: column; }.result-drawer { right: 10px; bottom: 10px; width: calc(100% - 20px); }.result-summary { grid-template-columns: 1fr; }
  }
  @media (max-width: 480px) {
    .studio-topbar .brand small { display: none; }.studio-topbar .button { padding-inline: 11px; }.tool-identity h1 { font-size: 17px; }.workbench-stage { padding: 8px; }.preview-content { padding: 0; }.control-row { grid-template-columns: 1fr; }.seamless-stage { padding: 10px; }.method-picker { grid-template-columns: repeat(3,1fr); }
  }
  @keyframes icon-trace { from { stroke-dasharray: 45; stroke-dashoffset: 45; } to { stroke-dasharray: 45; stroke-dashoffset: 0; } }
  @keyframes tool-icon-trace { from { stroke-dasharray: 52; stroke-dashoffset: 52; opacity: .3; } to { stroke-dasharray: 52; stroke-dashoffset: 0; opacity: 1; } }
  @keyframes tool-title-arrive { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes advanced-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
  @keyframes canvas-arrive { from { opacity:.35; transform:scale(.985); } to { opacity:1; transform:none; } }
  @keyframes render-scan { from { left:8%; opacity:0; } 20% { opacity:1; } to { left:92%; opacity:0; } }
  @media (prefers-reduced-motion: reduce) { .material-card, .drop-zone, .method-picker span, .method-picker svg, .seamless-stage, .render-scan, .advanced-body, .tool-identity, .studio-tool-svg g { transition: none; animation: none !important; } }
}