:root {
  --ink: #151515;
  --paper: #f5f1e9;
  --paper-bright: #fffdf8;
  --muted: #858079;
  --line: rgba(21, 21, 21, .15);
  --soft-line: rgba(21, 21, 21, .08);
  --coral: #ff5c45;
  --blue: #8dd3ff;
  --sun: #ffc857;
  --lavender: #c6b9ff;
  --sans: "DM Sans", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --display: "Syne", "PingFang SC", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 13px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.app-shell { min-height: 100vh; overflow: hidden; background: var(--paper); }
.topbar { height: 70px; padding: 0 42px; display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: var(--paper-bright); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-mark { width: 25px; height: 25px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-items: end; }
.brand-mark i { display: block; width: 100%; background: var(--coral); transform: skewY(-22deg); }
.brand-mark i:nth-child(1) { height: 60%; opacity: .72; }.brand-mark i:nth-child(2) { height: 80%; background: var(--blue); }.brand-mark i:nth-child(3) { height: 100%; background: var(--paper-bright); }
.brand-word { font: 800 18px/1 var(--display); letter-spacing: .1em; }.brand-cn { margin-left: 2px; color: rgba(255,253,248,.48); font: 500 11px var(--mono); letter-spacing: .08em; }
.main-nav { display: flex; align-items: center; gap: 34px; margin-left: 88px; height: 100%; }
.nav-item { height: 100%; padding: 0 3px; border: 0; border-bottom: 2px solid transparent; background: none; color: rgba(255,253,248,.5); font-size: 12px; transition: color .2s ease, border-color .2s ease; }
.nav-item:hover, .nav-item.is-active { color: var(--paper-bright); }.nav-item.is-active { border-color: var(--coral); }
.top-actions { display: flex; align-items: center; gap: 18px; }.save-state { display: flex; align-items: center; gap: 7px; color: rgba(255,253,248,.58); font: 10px var(--mono); }.save-dot { width: 5px; height: 5px; border-radius: 50%; background: #83d47d; box-shadow: 0 0 0 3px rgba(131,212,125,.14); }.icon-button { width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: transparent; color: var(--paper-bright); font-size: 16px; }.avatar { width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--sun); color: var(--ink); font: 700 11px var(--mono); }

main { max-width: 1500px; margin: 0 auto; padding: 57px 42px 0; }
.workspace-head { display: flex; justify-content: space-between; align-items: end; margin: 0 0 42px; }.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.eyebrow-line { display: inline-block; width: 28px; height: 1px; background: var(--coral); }
h1, h2, h3, p { margin: 0; }.workspace-head h1 { margin-top: 16px; font: 700 clamp(40px, 4.4vw, 69px)/.95 var(--display); letter-spacing: -.07em; }.workspace-head h1 em, .tools-intro h2 em, .tool-banner h3 em { color: var(--coral); font-style: normal; }.head-note { display: flex; align-items: start; gap: 22px; padding-bottom: 5px; }.note-number { font: 10px var(--mono); color: var(--coral); letter-spacing: .06em; }.head-note p { color: var(--muted); font-size: 12px; line-height: 1.65; }

.editor-grid { display: grid; grid-template-columns: 245px minmax(420px, 1fr) 245px; gap: 0; min-height: 705px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.control-panel { padding: 22px 22px 25px 0; }.right-panel { padding: 22px 0 25px 22px; border-left: 1px solid var(--line); }.left-panel { border-right: 0; }.panel-section { padding-bottom: 23px; margin-bottom: 21px; border-bottom: 1px solid var(--soft-line); }.section-label { display: flex; justify-content: space-between; margin-bottom: 16px; color: var(--ink); font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.section-index { color: var(--muted); font-weight: 400; }

.upload-zone { width: 100%; min-height: 75px; padding: 13px 12px; display: flex; align-items: center; gap: 10px; border: 1px dashed rgba(21,21,21,.32); background: rgba(255,253,248,.42); text-align: left; transition: .2s ease; }.upload-zone:hover, .upload-zone.is-dragging { border-color: var(--coral); background: rgba(255,92,69,.08); }.upload-plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: var(--paper-bright); font-size: 22px; font-weight: 300; line-height: 1; }.upload-copy { display: grid; gap: 5px; }.upload-copy strong { font-size: 12px; font-weight: 700; }.upload-copy small, .template-option small { color: var(--muted); font-size: 10px; }.upload-arrow { margin-left: auto; align-self: start; font-size: 16px; }.thumb-row { display: flex; gap: 5px; margin-top: 10px; overflow: hidden; }.thumb { position: relative; flex: 0 0 38px; height: 38px; border: 0; padding: 0; overflow: hidden; background: #ddd; }.thumb img { width: 100%; height: 100%; object-fit: cover; }.thumb.is-extra::after { content: attr(data-count); position: absolute; inset: 0; display: grid; place-items: center; background: rgba(21,21,21,.6); color: white; font: 10px var(--mono); }

.layout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }.layout-option { min-height: 64px; display: grid; justify-items: center; align-content: center; gap: 8px; padding: 8px 3px; border: 1px solid var(--soft-line); background: transparent; color: var(--muted); font-size: 10px; transition: .2s ease; }.layout-option:hover { border-color: rgba(21,21,21,.3); color: var(--ink); }.layout-option.is-selected { border-color: var(--ink); background: var(--ink); color: var(--paper-bright); }.layout-icon { display: block; position: relative; width: 31px; height: 25px; }.layout-icon::before, .layout-icon::after { content: ""; position: absolute; display: block; background: currentColor; }.icon-horizontal::before { inset: 4px 0; box-shadow: 11px 0 0 -1px currentColor, 22px 0 0 -1px currentColor; }.icon-vertical::before { inset: 0 9px; box-shadow: 0 9px 0 -1px currentColor, 0 18px 0 -1px currentColor; }.icon-quad::before { inset: 0; background: linear-gradient(90deg, currentColor 48%, transparent 48%, transparent 52%, currentColor 52%), linear-gradient(0deg, currentColor 48%, transparent 48%, transparent 52%, currentColor 52%); }.icon-nine::before { inset: 0; background: linear-gradient(90deg, currentColor 30%, transparent 30%, transparent 35%, currentColor 35%, currentColor 65%, transparent 65%, transparent 70%, currentColor 70%), linear-gradient(0deg, currentColor 30%, transparent 30%, transparent 35%, currentColor 35%, currentColor 65%, transparent 65%, transparent 70%, currentColor 70%); }.layout-option.is-selected .layout-icon::before { box-shadow: none; }

.template-list { display: grid; gap: 6px; }.template-option { width: 100%; display: grid; grid-template-columns: 38px 1fr 15px; align-items: center; gap: 9px; padding: 5px; border: 1px solid transparent; background: transparent; text-align: left; }.template-option:hover { background: rgba(255,253,248,.5); }.template-option.is-selected { border-color: var(--ink); background: rgba(255,253,248,.6); }.template-option strong { display: block; font-size: 11px; font-weight: 700; }.template-option small { display: block; margin-top: 3px; }.template-option .check { color: transparent; font-size: 13px; }.template-option.is-selected .check { color: var(--coral); }.template-preview { position: relative; display: block; width: 38px; height: 43px; overflow: hidden; }.template-preview i { position: absolute; inset: 6px 5px 13px; display: block; background: linear-gradient(135deg, #ffc857, #ff8062 52%, #171717); }.template-preview b { position: absolute; left: 5px; bottom: 3px; color: var(--ink); font: 7px var(--mono); line-height: 1; }.preview-editorial { background: var(--paper-bright); border: 1px solid var(--line); }.preview-film { padding: 3px; background: var(--paper-bright); border: 1px solid var(--ink); }.preview-film i { inset: 3px 3px 14px; background: linear-gradient(135deg, #8dd3ff, #343c52 60%, #ff5c45); }.preview-film b { bottom: 4px; left: 4px; font-size: 6px; }.preview-sticker { background: var(--sun); }.preview-sticker i { inset: 6px 5px 7px; background: linear-gradient(135deg, #ff5c45, #c6b9ff); transform: rotate(-7deg); }.preview-sticker b { left: auto; right: 4px; top: 6px; bottom: auto; color: var(--ink); font-size: 5px; text-align: right; }.preview-mono { background: #161616; }.preview-mono i { inset: 0 11px 0 0; background: linear-gradient(135deg, #777, #202020); opacity: .8; }.preview-mono b { color: var(--paper-bright); right: 4px; left: auto; top: 7px; bottom: auto; text-align: right; font-size: 8px; }
.more-template { width: 100%; padding: 2px 0; border: 0; background: none; color: var(--muted); text-align: left; font: 10px var(--mono); }.more-template:hover { color: var(--coral); }.more-template span { margin-right: 5px; color: var(--coral); font-size: 15px; vertical-align: -1px; }

.canvas-area { min-width: 0; padding: 0 24px; background: rgba(255,253,248,.3); }.canvas-toolbar, .canvas-footer { height: 57px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 10px var(--mono); }.canvas-meta { display: flex; align-items: center; gap: 8px; }.live-indicator { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,92,69,.12); }.meta-divider { width: 1px; height: 13px; margin: 0 3px; background: var(--line); }.canvas-actions { display: flex; gap: 15px; }.text-button { padding: 2px 0; border: 0; background: none; color: var(--muted); font: 10px var(--mono); }.text-button:hover { color: var(--ink); }.canvas-actions .text-button:first-child, .canvas-actions .text-button:nth-child(2) { color: var(--ink); font-size: 19px; line-height: 10px; }
.canvas-stage { position: relative; min-height: 590px; height: calc(100% - 114px); display: grid; place-items: center; padding: 32px 34px; background-color: #eae5dc; background-image: linear-gradient(rgba(21,21,21,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(21,21,21,.045) 1px, transparent 1px); background-size: 18px 18px; }.canvas-stage::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(21,21,21,.08); pointer-events: none; }.stage-ruler { position: absolute; z-index: 2; color: rgba(21,21,21,.38); font: 8px var(--mono); pointer-events: none; }.ruler-top { top: 17px; left: 47px; right: 47px; display: flex; justify-content: space-between; }.ruler-side { top: 45px; bottom: 42px; left: 18px; display: flex; flex-direction: column; justify-content: space-between; }.collage-wrap { position: relative; z-index: 1; width: min(100%, 450px); filter: drop-shadow(0 16px 18px rgba(21,21,21,.17)); }.collage-canvas { position: relative; width: 100%; aspect-ratio: 4/5; display: grid; gap: var(--gap, 8px); padding: var(--frame, 16px); overflow: hidden; background: var(--canvas-bg, var(--paper-bright)); transition: aspect-ratio .3s ease, gap .2s ease, padding .2s ease, background .2s ease; }.collage-canvas.layout-horizontal { grid-auto-flow: column; grid-template-columns: repeat(var(--photo-count, 4), 1fr); grid-template-rows: 1fr; }.collage-canvas.layout-vertical { grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: repeat(var(--photo-count, 4), 1fr); }.collage-canvas.layout-quad { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }.collage-canvas.layout-nine { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }.canvas-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #d4d0c8; border-radius: var(--radius, 12px); }.canvas-tile img { width: 100%; height: 100%; display: block; object-fit: cover; }.canvas-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,.13), transparent 45%, rgba(21,21,21,.16)); pointer-events: none; }.tile-index { position: absolute; z-index: 2; top: 8px; left: 9px; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; color: white; font: 8px var(--mono); text-shadow: 0 1px 5px #222; }
.template-editorial .canvas-tile:nth-child(1) { grid-row: span 2; }.layout-nine.template-editorial .canvas-tile:nth-child(1) { grid-row: span 1; }.template-editorial .tile-index { opacity: .86; }.template-editorial::before { content: var(--editorial-caption, "A SLOW SUNDAY"); position: absolute; z-index: 3; left: 16px; bottom: 7px; color: var(--ink); font: 700 clamp(11px, 1.6vw, 17px) var(--display); letter-spacing: -.06em; pointer-events: none; }.template-editorial::after { content: "FRAME / 01"; position: absolute; z-index: 3; right: 16px; bottom: 11px; color: var(--muted); font: 7px var(--mono); pointer-events: none; }.template-film { --frame: 23px; --gap: 3px; --radius: 0px; border: 1px solid var(--ink); }.template-film .canvas-tile::after { background: linear-gradient(180deg, transparent 55%, rgba(21,21,21,.3)); }.template-film::before { content: "A SLOW SUNDAY  /  35MM"; position: absolute; left: 24px; bottom: 7px; color: var(--ink); font: 7px var(--mono); letter-spacing: .08em; }.template-film::after { content: "FRAME"; position: absolute; right: 22px; bottom: 7px; color: var(--ink); font: 700 8px var(--display); }.template-sticker { --frame: 15px; --gap: 10px; --radius: 8px; background: var(--sun); }.template-sticker .canvas-tile:nth-child(2) { transform: rotate(2deg) scale(1.02); z-index: 2; box-shadow: 0 3px 10px rgba(21,21,21,.16); }.template-sticker::before { content: "STAY\A CURIOUS"; white-space: pre; position: absolute; z-index: 4; right: 13px; top: 10px; color: var(--coral); font: 800 clamp(13px, 1.8vw, 20px)/.8 var(--display); letter-spacing: -.1em; transform: rotate(5deg); }.template-sticker::after { content: "✳"; position: absolute; z-index: 5; left: 20px; bottom: 8px; color: var(--ink); font-size: 21px; transform: rotate(-14deg); }.template-mono { --frame: 18px; --gap: 4px; --radius: 0; background: #191919; }.template-mono .canvas-tile { filter: grayscale(1) contrast(1.05); }.template-mono::before { content: "24 / 09"; position: absolute; z-index: 3; right: 17px; top: 9px; color: var(--paper-bright); font: 700 clamp(12px, 1.7vw, 18px)/.8 var(--display); letter-spacing: -.08em; }.template-mono::after { content: "INDEX YOUR DAYS"; position: absolute; z-index: 3; left: 18px; bottom: 7px; color: rgba(255,253,248,.7); font: 7px var(--mono); letter-spacing: .12em; }
.stage-corner { position: absolute; width: 9px; height: 9px; border-color: rgba(21,21,21,.45); }.corner-tl { top: 25px; left: 26px; border-top: 1px solid; border-left: 1px solid; }.corner-tr { top: 25px; right: 26px; border-top: 1px solid; border-right: 1px solid; }.corner-bl { bottom: 25px; left: 26px; border-bottom: 1px solid; border-left: 1px solid; }.corner-br { right: 26px; bottom: 25px; border-right: 1px solid; border-bottom: 1px solid; }.selection-tag { position: absolute; z-index: 4; left: 15px; bottom: 14px; padding: 4px 6px; background: var(--coral); color: var(--paper-bright); font: 8px var(--mono); letter-spacing: .04em; transform: rotate(-2deg); }.canvas-footer { height: 57px; }.footer-shortcuts { display: flex; align-items: center; gap: 5px; }.footer-shortcuts kbd { min-width: 17px; padding: 3px 4px; border: 1px solid var(--line); background: rgba(255,253,248,.55); font: 9px var(--mono); text-align: center; }

.field-row { min-height: 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--soft-line); }.field-row label, .field-row > span { color: var(--muted); font-size: 11px; }.field-row select { width: 95px; padding: 6px 0; border: 0; background: none; color: var(--ink); font: 11px var(--mono); text-align: right; cursor: pointer; }.slider-row { position: relative; flex-wrap: wrap; }.slider-row output { margin-left: auto; color: var(--ink); font: 10px var(--mono); }.slider-row input { width: 100%; height: 3px; margin: 6px 0 8px; accent-color: var(--coral); cursor: pointer; }.color-row { padding: 10px 0; border-bottom: 0; }.color-swatches { display: flex; gap: 7px; }.color-swatch { width: 17px; height: 17px; padding: 0; border: 1px solid rgba(21,21,21,.25); border-radius: 50%; background: var(--swatch); }.color-swatch.is-selected { outline: 1px solid var(--ink); outline-offset: 3px; }.poster-copy-section { padding-bottom: 19px; }.input-label { display: block; margin-bottom: 7px; color: var(--muted); font: 9px var(--mono); }.text-input { width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }.text-input:focus { border-color: var(--coral); }.toggle-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--muted); font-size: 11px; }.toggle { width: 31px; height: 18px; padding: 2px; border: 0; border-radius: 99px; background: #c7c1b6; text-align: left; transition: .2s ease; }.toggle span { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--paper-bright); transition: transform .2s ease; }.toggle.is-on { background: var(--coral); }.toggle.is-on span { transform: translateX(13px); }.export-section { margin: 0; padding-top: 1px; border: 0; }.export-spec { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 13px; color: var(--muted); font-size: 10px; }.export-spec strong { color: var(--ink); font: 10px var(--mono); }.export-button { width: 100%; padding: 13px 14px; display: flex; justify-content: space-between; border: 0; background: var(--ink); color: var(--paper-bright); font-size: 12px; font-weight: 700; transition: background .2s ease, transform .2s ease; }.export-button:hover { background: var(--coral); transform: translateY(-2px); }.export-note { margin-top: 9px; color: var(--muted); font: 9px var(--mono); text-align: center; }

.lower-strip { min-height: 103px; padding: 25px 0 29px; display: flex; align-items: start; gap: 60px; border-bottom: 1px solid var(--line); }.strip-heading { display: flex; align-items: center; gap: 9px; min-width: 160px; color: var(--muted); font: 10px var(--mono); }.format-chips { display: flex; align-items: center; gap: 9px; }.format-chip { min-width: 145px; padding: 6px 10px 6px 7px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; background: transparent; text-align: left; }.format-chip:hover, .format-chip.is-active { border-color: var(--ink); background: rgba(255,253,248,.6); }.format-chip strong, .format-chip small { display: block; }.format-chip strong { font-size: 10px; }.format-chip small { margin-top: 2px; color: var(--muted); font: 9px var(--mono); }.format-shape { display: block; border: 1px solid var(--coral); }.format-shape.portrait { width: 19px; height: 25px; }.format-shape.square { width: 23px; height: 23px; border-color: var(--blue); }.format-shape.landscape { width: 29px; height: 17px; border-color: var(--sun); }.strip-tip { margin-left: 16px; color: var(--muted); font-size: 11px; }.strip-tip span { color: var(--coral); font-size: 17px; vertical-align: -2px; }

.tools-view { padding: 4px 0 78px; }.tools-intro { padding: 33px 0 39px; }.tools-intro h2 { max-width: 630px; margin-top: 18px; font: 700 clamp(38px, 4.4vw, 64px)/.94 var(--display); letter-spacing: -.08em; }.tools-intro p { margin-top: 19px; color: var(--muted); font-size: 13px; }.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.tool-card { min-height: 190px; padding: 20px; display: flex; flex-direction: column; align-items: start; border: 1px solid var(--line); background: rgba(255,253,248,.45); text-align: left; transition: .2s ease; }.tool-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 7px 7px 0 var(--coral); }.tool-icon { display: grid; place-items: center; width: 37px; height: 37px; margin-bottom: auto; border-radius: 50%; background: var(--coral); color: var(--paper-bright); font: 19px var(--mono); }.tool-card:nth-child(2) .tool-icon { background: var(--blue); color: var(--ink); }.tool-card:nth-child(3) .tool-icon { background: var(--sun); color: var(--ink); }.tool-name { font: 700 20px var(--display); letter-spacing: -.05em; }.tool-desc { margin-top: 7px; color: var(--muted); font-size: 11px; }.tool-arrow { margin-top: 22px; font-size: 18px; }.tool-banner { min-height: 210px; margin-top: 11px; padding: 26px; display: flex; align-items: end; justify-content: space-between; background: var(--ink); color: var(--paper-bright); }.banner-kicker { color: var(--blue); font: 10px var(--mono); }.tool-banner h3 { margin-top: 16px; font: 700 36px/.95 var(--display); letter-spacing: -.08em; }.banner-action { padding: 11px 14px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--paper-bright); font-size: 11px; }.banner-action:hover { background: var(--coral); border-color: var(--coral); }
.site-footer { max-width: 1500px; margin: 0 auto; padding: 17px 42px 26px; display: flex; justify-content: space-between; color: var(--muted); font: 9px var(--mono); }.toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; padding: 10px 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper-bright); font: 10px var(--mono); opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: .25s ease; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

body.is-dark { --paper: #242323; --paper-bright: #302f2d; --ink: #f5f1e9; --muted: #afa9a1; --line: rgba(245,241,233,.2); --soft-line: rgba(245,241,233,.12); }.is-dark .app-shell { background: var(--paper); }.is-dark .topbar { background: #0d0d0d; }.is-dark .canvas-stage { background-color: #33312e; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); }.is-dark .upload-zone, .is-dark .format-chip:hover, .is-dark .format-chip.is-active, .is-dark .template-option.is-selected { background: rgba(48,47,45,.8); }.is-dark .text-input, .is-dark .field-row select { color: var(--ink); }
[hidden] { display: none !important; }
@media (max-width: 1100px) { .editor-grid { grid-template-columns: 210px minmax(360px, 1fr) 210px; }.control-panel { padding-right: 15px; }.right-panel { padding-left: 15px; }.canvas-area { padding: 0 14px; }.main-nav { margin-left: 20px; } }
@media (max-width: 820px) { .topbar { padding: 0 20px; }.main-nav { gap: 15px; margin-left: auto; margin-right: 18px; }.save-state { display: none; } main { padding: 42px 20px 0; }.workspace-head { align-items: start; margin-bottom: 30px; }.head-note { display: none; }.editor-grid { display: flex; flex-direction: column; border-bottom: 0; }.canvas-area { order: -1; padding: 0; }.canvas-stage { min-height: 510px; }.left-panel, .right-panel { padding: 24px 0; border-top: 1px solid var(--line); border-left: 0; }.left-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }.left-panel .template-section { grid-column: span 2; }.right-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }.right-panel .export-section { grid-column: span 2; }.lower-strip { display: block; }.format-chips { margin-top: 15px; flex-wrap: wrap; }.strip-tip { width: 100%; margin: 6px 0 0; }.site-footer { padding: 17px 20px 26px; } }
@media (max-width: 580px) { .topbar { height: 62px; }.brand-cn { display: none; }.main-nav { gap: 11px; margin-right: 10px; }.nav-item { font-size: 11px; }.icon-button { display: none; }.avatar { width: 27px; height: 27px; }.workspace-head h1 { font-size: 44px; }.canvas-stage { min-height: 435px; padding: 30px 22px; }.collage-wrap { width: min(100%, 340px); }.ruler-top { left: 35px; right: 35px; }.ruler-side { left: 11px; }.stage-corner.corner-tl, .stage-corner.corner-bl { left: 18px; }.stage-corner.corner-tr, .stage-corner.corner-br { right: 18px; }.left-panel, .right-panel { display: block; }.left-panel .template-section, .right-panel .export-section { grid-column: auto; }.format-chip { min-width: calc(50% - 5px); }.format-shape.landscape { width: 25px; }.site-footer { gap: 10px; flex-wrap: wrap; }.site-footer span:last-child { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Focused editing layers: the canvas stays visually quiet until a user selects a tile. */
.canvas-tile { cursor: pointer; }
.canvas-tile img { transform-origin: center; transition: transform .25s ease, object-position .25s ease; }
.canvas-tile.is-selected { outline: 2px solid var(--coral); outline-offset: -2px; }
.template-editorial::before, .template-film::before { content: none; }
.caption-layer { position: absolute; z-index: 7; top: var(--caption-top); right: var(--caption-right); bottom: var(--caption-bottom); left: var(--caption-left); max-width: calc(100% - 32px); color: var(--ink); pointer-events: none; text-align: var(--caption-align); transform: var(--caption-transform); }
.template-editorial .caption-layer { font: 700 clamp(11px, 1.6vw, 17px) var(--display); letter-spacing: -.06em; }
.template-film .caption-layer { color: var(--ink); font: 500 clamp(8px, 1.05vw, 12px) var(--mono); letter-spacing: .08em; }
.template-sticker .caption-layer { color: var(--ink); font: 800 clamp(12px, 1.7vw, 19px) var(--display); letter-spacing: -.08em; }
.template-mono .caption-layer { color: var(--paper-bright); font: 700 clamp(12px, 1.7vw, 18px) var(--display); letter-spacing: -.08em; }
.watermark-layer { position: absolute; z-index: 7; right: 16px; bottom: 10px; max-width: calc(100% - 32px); overflow: hidden; color: color-mix(in srgb, var(--ink) 58%, transparent); font: 7px var(--mono); letter-spacing: .08em; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; }
.template-mono .watermark-layer { color: rgba(255,253,248,.62); }
.caption-position-row { margin-top: 9px; }
.poster-copy-section .slider-row { border-bottom: 0; }
.selected-photo { display: flex; align-items: center; gap: 9px; padding: 8px 0 12px; }
.selected-photo-index { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--coral); color: var(--coral); font: 9px var(--mono); }
.selected-photo strong, .selected-photo small { display: block; }
.selected-photo strong { max-width: 155px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.selected-photo small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.crop-section .slider-row { margin-top: 1px; }
.reset-button { margin-top: 14px; color: var(--coral); }
.watermark-label { margin-top: 17px; }
.export-section .section-label { margin-bottom: 9px; }
.export-section .field-row select { width: 125px; }
.format-shape.zhihu { width: 21px; height: 28px; border-color: var(--lavender); }