/* A personal studio tool: big paper, compact controls, room for ideas. */
[hidden],.studio-window__breadcrumb[hidden] { display:none!important; }
.playground-intro { display:grid; grid-template-columns:1.35fr .65fr; gap:7%; align-items:center; padding-block:65px 40px; }
.playground-intro h1 { font:500 clamp(56px,7.5vw,108px)/.97 var(--font-display); letter-spacing:-.055em; }.playground-intro h1 em { color:var(--burgundy); font-weight:400; }.playground-intro h1 > span { color:var(--rose); }.playground-intro .lede { font-size:17px; line-height:1.8; margin:26px 0 0; max-width:640px; }.playground-intro__art { position:relative; display:grid; place-items:center; padding:30px 15px; }.playground-intro__art > img { height:235px; width:250px; object-fit:contain; transform:rotate(9deg); filter:drop-shadow(5px 18px 10px #692a4220); }.playground-intro__art .script { font-size:33px; color:var(--orchid); transform:rotate(-8deg); margin-top:15px; }.sample-stamp { font-size:9px; letter-spacing:.17em; border:1px solid #c4a7b3; padding:8px 13px; transform:rotate(4deg); margin-top:22px; color:var(--burgundy); }
.playground-entries { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.playground-entries > button { position:relative; display:grid; grid-template-columns:38px 1fr; gap:7px 12px; padding:25px; text-align:left; border:1px solid #d7c4bc; border-radius:7px; background:var(--paper); cursor:pointer; box-shadow:0 5px 12px #692a4206; }.playground-entries button[aria-pressed=true] { background:var(--blush); border-color:var(--orchid); box-shadow:inset 0 -3px var(--orchid); }.entry-number { grid-row:span 2; font:italic 28px var(--font-display); color:var(--orchid); }.playground-entries strong { font:500 25px/1.2 var(--font-display); }.playground-entries button > span:last-child { font-size:12px; line-height:1.7; color:var(--ink-soft); }.session-note { font-size:11px; color:var(--ink-soft); padding:16px 0 22px; line-height:1.7; }
.tool-heading { display:flex; gap:20px; align-items:center; justify-content:space-between; margin:10px 0 25px; scroll-margin-top:95px; }.tool-heading .eyebrow { font-size:10px; margin-bottom:10px; }.tool-heading h2 { font:500 clamp(26px,3.1vw,42px)/1.15 var(--font-display); letter-spacing:-.025em; }.tool-heading h2 em { font-weight:400; color:var(--burgundy); }
.playground-app button:not(.btn):not(.swatch),.playground-dialog-content button { font-family:var(--font-body); }.playground-app button { cursor:pointer; }.playground-app button:disabled { cursor:default; opacity:.4; }.poster-toolbar button,.layer-controls button,.move-controls button,.brief-actions button,#brief-preview,.brief-navigation button,#poster-direction button,.summary-heading button { background:var(--paper); border:1px solid #cfb9c3; border-radius:5px; min-height:44px; padding:10px 13px; font:500 12px/1.5 var(--font-body); color:var(--burgundy); }.playground-app button.primary-control { background:var(--burgundy); color:var(--paper); border-color:var(--burgundy); }.poster-toolbar button:not(:disabled):hover,.brief-actions button:hover { border-color:var(--orchid); background:var(--blush); }.poster-toolbar .primary-control:hover { color:var(--burgundy); }
.poster-workspace { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr); gap:28px; padding:25px; border:1px solid #d9c8bd; border-radius:12px; background:repeating-linear-gradient(9deg,#aa8e7004 0 1px,transparent 1px 4px),#eee5da; align-items:start; }.poster-stage { position:sticky; top:90px; min-width:0; }.poster-stage__meta { display:flex; justify-content:space-between; gap:15px; font-size:9px; letter-spacing:.1em; padding:0 0 16px; color:var(--ink-soft); }.poster-canvas-wrap { width:100%; max-width:500px; margin:auto; border:1px solid #d0c1b6; box-shadow:0 3px 0 #e0d5c7,0 15px 28px #692a4217; background:var(--paper); }.poster-canvas-wrap canvas { display:block; width:100%; height:auto; touch-action:pan-y; cursor:crosshair; }.canvas-instruction { font-size:10px; line-height:1.7; color:var(--ink-soft); margin:16px 0 10px; }.poster-toolbar { display:flex; flex-wrap:wrap; gap:6px; }.tool-status { font-size:11px; line-height:1.7; margin:10px 0 0; color:var(--burgundy); min-height:1.7em; }
.poster-editor { min-width:0; background:var(--paper); border:1px solid #dfd2c8; border-radius:8px; padding:16px; }.editor-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); gap:3px; padding-bottom:12px; }.editor-tabs button { min-height:44px; border:0; background:none; border-radius:4px; font-size:12px; padding:6px; }.editor-tabs button[aria-pressed=true] { background:var(--burgundy); color:var(--paper); }.editor-panel { padding-top:20px; }.editor-panel h3 { font:500 25px/1.2 var(--font-display); margin:0 0 15px; }.playground-app label:not(.choice),.palette-group legend { display:block; font:600 12px/1.5 var(--font-body); margin-bottom:17px; }.playground-app input:not([type=checkbox]):not([type=range]),.playground-app textarea,.playground-app select { display:block; width:100%; max-width:100%; min-height:44px; padding:11px 12px; margin-top:7px; border:1px solid #cdbfb5; border-radius:4px; background:#fffdfa; font:400 16px/1.5 var(--font-body); color:var(--ink); }.playground-app textarea { resize:vertical; }.playground-app input[type=range] { display:block; width:100%; min-height:44px; accent-color:var(--burgundy); margin-top:4px; }.playground-app input:focus,.playground-app textarea:focus,.playground-app select:focus { outline:2px solid var(--orchid); outline-offset:2px; }.field-limit { font-weight:400; color:var(--ink-soft); font-size:10px; display:block; }.field-help { font-size:11px; line-height:1.7; color:var(--ink-soft); margin:-4px 0 15px; }.editor-panel output { float:right; font-weight:400; font-size:11px; }.field-error { font-size:12px; line-height:1.6; color:var(--burgundy); min-height:1em; }.palette-group { border:0; padding:0; margin:0 0 22px; }.palette-group legend { margin-bottom:8px; }.palette-swatches { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.swatch { display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:1px solid transparent; border-radius:5px; min-height:65px; padding:8px 3px; font:400 10px/1.3 var(--font-body); }.swatch::before { content:''; width:28px; height:28px; border-radius:50%; border:1px solid #b9aaa2; background:var(--swatch); }.swatch[aria-pressed=true] { border-color:var(--burgundy); background:#692a4208; }.sticker-tray { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.sticker-tray button { border:1px solid var(--line); background:#fffdfa; min-height:110px; border-radius:4px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-size:11px; padding:10px; }.sticker-tray img { width:60px; height:65px; object-fit:contain; }.tray-tape { width:60px; height:23px; background:repeating-linear-gradient(90deg,#dca7bc60 0 2px,#dca7bc80 2px 3px); transform:rotate(-8deg); }.tray-paper { width:60px; height:38px; background:#f7f1e4; border:1px solid var(--rose); box-shadow:1px 3px 5px #692a4215; }.poster-editor fieldset { border:0; padding:0; margin:0; min-width:0; }.poster-editor fieldset legend { font-size:11px; color:var(--ink-soft); margin-bottom:15px; }.move-controls { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:15px; }.layer-controls { display:flex; flex-wrap:wrap; gap:7px; }.direction-button { width:100%; margin-top:22px; min-height:48px; font-size:12px; text-align:center; }.clean-poster-preview { display:block; width:auto; max-width:100%; max-height:100%; margin:auto; object-fit:contain; }.playground-dialog-content h3,.brief-summary-preview > h3 { font:500 32px/1.2 var(--font-display); margin-bottom:20px; }.playground-dialog-content p { line-height:1.8; }
.brief-desk { display:grid; grid-template-columns:235px minmax(0,1fr); gap:25px; align-items:start; padding:30px; background:radial-gradient(ellipse at 90% 20%,#f5dae6,transparent 70%),#eee4d7; border:1px solid #d7c4b9; border-radius:12px; }#brief-stepper { display:grid; gap:9px; position:sticky; top:100px; }#brief-stepper button { text-align:left; padding:14px; min-height:48px; font-size:12px; border:1px solid #d5c4b8; background:#fcf7efe0; border-radius:4px; }#brief-stepper button[aria-current=step] { background:var(--burgundy); color:var(--paper); border-color:var(--burgundy); }#creative-brief { min-width:0; }.brief-paper { background:repeating-linear-gradient(8deg,#b59c7c03 0 1px,transparent 1px 4px),var(--paper); border:1px solid #dfd1c4; padding:clamp(22px,4vw,48px); box-shadow:2px 4px 0 -1px #f2e9db,2px 5px 0 -1px #d7c4b9,3px 14px 20px #692a4210; }.brief-paper h3 { font:500 clamp(29px,3vw,41px)/1.1 var(--font-display); letter-spacing:-.02em; margin-bottom:18px; }.brief-paper [data-step]>p { font-size:14px; line-height:1.8; margin-bottom:25px; }.brief-paper .eyebrow { font-size:9px; }.brief-paper label:not(.choice) { font-size:13px; margin-top:20px; }.choice-stack { display:grid; gap:10px; margin-bottom:24px; }.choice { display:flex; align-items:start; gap:12px; border:1px solid #d8c8bf; background:#fffcf7; padding:16px; border-radius:4px; cursor:pointer; min-height:48px; }.choice:has(input:checked) { border-color:var(--orchid); background:var(--blush); }.choice input { width:20px; height:20px; flex:none; margin:3px 0; accent-color:var(--burgundy); }.choice-copy { display:grid; gap:6px; }.choice strong { font-size:14px; font-weight:600; line-height:1.5; }.choice small { font-size:12px; line-height:1.7; color:var(--ink-soft); }.style-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.style-card { min-height:110px; position:relative; align-items:end; padding-top:45px; }.style-card::before { content:'Aa'; position:absolute; top:8px; right:17px; font:500 30px var(--font-display); color:var(--burgundy); }.style-card--1::before { transform:rotate(-10deg); color:var(--orchid); font-style:italic; }.style-card--2::before { font-family:var(--font-script); color:var(--orchid); font-size:37px; }.style-card--3::before { font-family:var(--font-body); font-weight:700; }.style-card--4::before { font-weight:400; font-size:24px; }.style-card--5::before { content:'…'; letter-spacing:4px; }.brief-navigation { display:flex; justify-content:space-between; gap:15px; margin-top:30px; border-top:1px solid var(--line); padding-top:22px; }.brief-navigation button { padding:12px 20px; }.summary-group { border-bottom:1px solid var(--line); padding:18px 0; break-inside:avoid; }.summary-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:14px; }.summary-heading h4 { font:500 23px var(--font-display); }.summary-heading button { font-size:11px; }.summary-group dl { margin:0; }.summary-group dt { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--burgundy); margin-top:14px; }.summary-group dd { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.8; margin:4px 0 0; }.brief-actions { display:flex; gap:10px; flex-wrap:wrap; margin-block:25px; }.brief-actions .btn { font-size:12px; min-height:44px; }.privacy-note { font-size:12px!important; line-height:1.8; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:20px; }#poster-direction { border:1px solid var(--rose); background:var(--blush); padding:20px; margin-top:22px; }#poster-direction h4 { font:500 24px var(--font-display); }#poster-direction p { white-space:pre-wrap; font-size:13px; line-height:1.7; margin-top:15px; }#poster-direction button { font-size:11px; }#brief-copy-text { font-size:13px; }.playground-footnote { display:flex; justify-content:center; align-items:center; gap:24px; padding:50px 0 65px; }.playground-footnote img { transform:rotate(-10deg); filter:drop-shadow(0 5px 6px #692a4215); }.playground-footnote p { font-family:var(--font-display); font-size:24px; margin:0; }.playground-footnote a { font:500 12px var(--font-body); }
@media(max-width:1000px) { .poster-workspace { gap:18px; padding:18px; grid-template-columns:minmax(0,1fr) minmax(275px,.9fr); }.brief-desk { grid-template-columns:180px minmax(0,1fr); gap:16px; padding:20px; }.tool-heading .tag { font-size:9px; } }
@media(max-width:700px) { .playground-intro { grid-template-columns:1fr; padding-block:38px 28px; gap:15px; }.playground-intro__art { display:none; }.playground-intro h1 { font-size:clamp(50px,13vw,76px); }.playground-intro .lede { font-size:15px; line-height:1.8; }.playground-entries { gap:10px; }.playground-entries > button { grid-template-columns:1fr; padding:16px; gap:10px; }.entry-number { grid-row:auto; font-size:22px; }.playground-entries strong { font-size:21px; }.playground-entries button>span:last-child { font-size:11px; }.tool-heading { align-items:start; flex-direction:column; gap:14px; }.tool-heading h2 { font-size:28px; }.tool-heading h2 em { display:block; }.poster-workspace { display:block; padding:13px; }.poster-stage { position:static; }.poster-canvas-wrap { width:min(100%,390px); }.poster-stage__meta { font-size:8px; }.poster-editor { margin-top:20px; padding:13px; }.poster-toolbar { display:grid; grid-template-columns:repeat(3,1fr); }.poster-toolbar #poster-download { grid-column:span 2; }.poster-toolbar button { padding-inline:8px; }.poster-toolbar .primary-control { font-size:12px; }.poster-stage .tool-status { min-height:3em; }.canvas-instruction { font-size:11px; }.editor-tabs { position:sticky; top:64px; background:var(--paper); z-index:3; padding-top:5px; }.playground-app input,.playground-app textarea,.playground-app select { scroll-margin-top:135px; scroll-margin-bottom:100px; }.brief-desk { display:block; padding:14px; }#brief-stepper { position:static; grid-template-columns:repeat(2,1fr); gap:6px; margin-bottom:18px; }#brief-stepper button { padding:10px; font-size:10px; min-height:44px; }.brief-paper { padding:22px 18px; }.brief-paper h3 { font-size:30px; }.style-options { gap:8px; }.style-card { padding:45px 10px 13px; }.style-card strong { font-size:12px; }.choice { padding:13px; }.brief-navigation { position:sticky; bottom:0; background:var(--paper); padding:14px 0 max(14px,env(safe-area-inset-bottom)); z-index:2; }.brief-actions { flex-direction:column; }.brief-actions>* { width:100%; text-align:center; }.playground-footnote { gap:16px; }.playground-footnote img { width:75px; }.playground-footnote p { font-size:20px; }.playground-dialog-content h3 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { .playground-app * { scroll-behavior:auto!important; } }
@media print { @page { margin:18mm; } body>* { display:none!important; } body>#brief-print-document { display:block!important; color:#30252a; background:white; } #brief-print-document h1 { font:500 26px Georgia,serif; } #brief-print-document pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.65 sans-serif; } .object-modal-open { overflow:visible; } }
/* Four small workspaces, one shared studio desk. */
.playground-tray-title { font:600 clamp(24px,3vw,36px)/1.2 var(--font-body); margin:16px 0 25px; scroll-margin-top:100px; letter-spacing:-.03em; }
.playground-entries { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }.playground-entries > button { grid-template-columns:1fr; padding:22px 18px; }.entry-number { grid-row:auto; }.playground-entries strong { font-family:var(--font-body); font-size:23px; }.playground-back { min-height:44px; margin-top:16px; padding:8px 0; border:0; border-bottom:1px solid #c6b3ba; background:none; color:var(--burgundy); font:500 12px var(--font-body); cursor:pointer; }
.social-controls { margin-bottom:22px; padding:24px; border:1px solid #d8c8bc; border-radius:9px; background:#fcf7f0; }.social-controls>label:first-child { max-width:350px; }.social-controls .story-guide { display:flex; gap:10px; align-items:center; font-size:12px; min-height:44px; }.story-guide input { width:20px; height:20px; accent-color:var(--burgundy); }.social-controls>p,#matching-downloads p { font-size:12px; line-height:1.8; margin-top:16px; }.social-template-tray { display:flex; gap:8px; flex-wrap:wrap; padding-block:15px; border-top:1px solid var(--line); }.social-template-tray button[aria-pressed=true] { background:var(--burgundy); color:var(--paper); }.social-controls button,.palette-mixer button,#use-playground-palette,#palette-direction button { min-height:44px; border:1px solid #cdb9c2; border-radius:5px; padding:10px 13px; font:500 12px/1.5 var(--font-body); background:var(--paper); color:var(--burgundy); cursor:pointer; }.social-controls button:hover,.palette-mixer button:not(:disabled):hover { border-color:var(--orchid); }.social-controls button:disabled { opacity:.45; }.social-story .poster-canvas-wrap { max-width:min(100%,340px); }#palette-direction { margin-top:22px; padding:20px; background:var(--blush); border:1px solid #d4b3c2; }#palette-direction p { overflow-wrap:anywhere; font-size:13px; line-height:1.8; margin-top:12px; }
.palette-mixer { padding:clamp(18px,3vw,35px); background:repeating-linear-gradient(4deg,#ac947a05 0 1px,transparent 1px 5px),#eee6da; border:1px solid #d6c6b7; border-radius:12px; }.mixer-toolbar { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.mixer-toolbar .mixer-actions { grid-column:1/-1; }.palette-mixer .mixer-actions,.palette-transfers { display:flex; flex-wrap:wrap; gap:9px; margin-block:18px; }.palette-transfers { border-top:1px solid #d0bfb2; padding-top:22px; }.paint-chips { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:30px 0 40px; align-items:start; }.paint-chip { padding:8px; min-width:0; background:#fffcf7; border:1px solid #ded2c4; box-shadow:2px 5px 0 -2px #e4d7c6,0 9px 18px #492d3610; }.paint-chip:nth-child(even) { transform:translateY(8px); }.palette-mixer .paint-chip__face { display:flex; flex-direction:column; justify-content:space-between; align-items:start; min-height:230px; width:100%; border:0; border-radius:0; padding:15px 12px; text-align:left; }.paint-chip__face>span { font-size:9px; letter-spacing:.09em; }.paint-chip__face strong { font-size:16px; font-weight:500; }.paint-chip__controls { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:9px; }.palette-mixer .paint-chip__controls button { padding:7px 3px; font-size:10px; border:0; background:none; }.paint-chip__controls button[aria-pressed=true] { background:var(--burgundy); color:var(--paper); }.palette-mixer button:disabled { opacity:.35; cursor:default; }.palette-application { display:grid; grid-template-columns:1fr 1fr; gap:30px; background:#fffaf5; padding:25px; border:1px solid #dfd0c0; margin-block:25px; }.palette-application h3 { font:500 30px/1.2 var(--font-body); margin-bottom:20px; letter-spacing:-.03em; }.palette-roles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.palette-roles label { min-width:0; }.palette-sample { display:flex; flex-direction:column; justify-content:center; align-items:start; min-height:340px; padding:35px; box-shadow:0 5px 12px #492d3610; }.sample-accent { display:block; width:100%; border-top:6px solid var(--sample-accent); padding-top:18px; font-size:9px; letter-spacing:.1em; }.palette-sample h3 { font-size:clamp(28px,3vw,43px); line-height:1.05; margin:26px 0 18px; }.palette-sample p { font-size:14px; line-height:1.7; }.sample-button { display:inline-block; background:var(--sample-button); color:var(--sample-button-ink); padding:12px 19px; font-size:12px; border-radius:4px; }.color-sheet label { display:block; margin:24px 0 8px; font:500 14px var(--font-body); }.color-sheet input { display:block; width:100%; padding:12px; border:1px solid var(--line); border-radius:5px; min-height:48px; font:16px var(--font-body); background:var(--paper); color:var(--ink); }.color-sheet input[type=color] { height:90px; padding:5px; cursor:pointer; }.color-sheet .field-error { min-height:28px; margin:14px 0; }
@media(max-width:1050px) { .playground-entries { grid-template-columns:repeat(2,minmax(0,1fr)); }.paint-chips { grid-template-columns:repeat(3,minmax(0,1fr)); }.paint-chip:nth-child(even) { transform:none; }.palette-application { gap:20px; padding:20px; }.palette-sample { padding:23px; } }
@media(max-width:700px) { .playground-entries strong { font-size:21px; }.playground-entries>button { padding:18px 15px; }.social-controls { padding:18px; }.social-template-tray { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.social-template-tray button { text-align:left; font-size:11px; }.social-story .poster-canvas-wrap { max-width:290px; }.mixer-toolbar { grid-template-columns:1fr; gap:0; }.paint-chips { grid-template-columns:1fr; gap:18px; margin-block:22px; }.paint-chip { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.palette-mixer .paint-chip__face { min-height:180px; padding:16px 12px; }.paint-chip__face strong { font-size:17px; }.paint-chip__controls { margin:0; align-content:center; gap:6px; }.palette-mixer .paint-chip__controls button { min-height:48px; font-size:11px; }.palette-application { grid-template-columns:1fr; padding:20px 16px; gap:20px; }.palette-sample { min-height:330px; }.palette-roles { gap:9px; }.palette-transfers { flex-direction:column; }.palette-mixer .mixer-actions { display:grid; grid-template-columns:1fr 1fr; }.palette-mixer .mixer-actions>button { padding:12px 8px; }#matching-downloads>button { width:100%; margin-top:7px; }.playground-back { scroll-margin-top:90px; } }
/* Local personal-image tray and property-specific color sheets. */
.personal-uploads{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.personal-uploads h4,.personal-text-colors h4{font:600 16px/1.4 var(--font-body);margin:14px 0}
.personal-uploads>button,.personal-text-colors>button,.personal-layer-colors>button,.palette-group>button,#personal-layer-controls button{display:block;min-height:44px;margin:8px 0;padding:10px 13px;border:1px solid #cdb9c2;background:var(--paper);border-radius:5px;color:var(--burgundy);font:500 12px/1.5 var(--font-body);text-align:left}
.personal-uploads>.field-help{margin:12px 0}.personal-upload-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.personal-upload-tray button{min-width:0;background:#fffcf7;border:1px solid #d5c6bc;border-radius:5px;padding:7px;min-height:90px;color:var(--burgundy)}
.personal-upload-tray img{display:block;width:100%;height:64px;object-fit:contain;background:repeating-conic-gradient(#eee6e1 0 25%,#fffcf7 0 50%) 0/12px 12px}.personal-upload-tray span{display:block;font-size:10px;overflow-wrap:anywhere;margin-top:7px}
#personal-layer-controls{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}#personal-crop{margin-top:18px}.personal-layer-colors p{font-size:12px;line-height:1.6;margin-top:12px}
.personal-color-sheet{max-width:650px;margin:auto}.personal-color-sheet .personal-color-preview{float:right;width:38%;height:auto;max-height:240px;object-fit:contain;margin:16px 0 18px 18px;border:1px solid #d1c0b5;background:white}.personal-color-sheet label{clear:left;max-width:100%}.personal-color-sheet input[type=range]{padding:0;accent-color:var(--burgundy)}.personal-color-sheet output{float:right;font-size:12px}.personal-color-sheet input[type=color]{width:52%;height:55px}.personal-color-sheet .field-error{font-size:12px;line-height:1.5}.custom-color-options{display:flex;flex-wrap:wrap;gap:8px;clear:both}.custom-color-options button{background:var(--paper);border:1px solid #cdb9c2;border-radius:4px;min-height:44px;padding:8px;color:var(--burgundy);font:12px var(--font-body)}.personal-color-sheet .window-actions{position:sticky;bottom:0;background:var(--paper);padding:14px 0 max(14px,env(safe-area-inset-bottom));z-index:1}.personal-color-sheet>p{font-size:13px;line-height:1.7}.personal-color-sheet input:focus{outline:2px solid var(--burgundy);outline-offset:2px}
@media(max-width:700px){.personal-color-sheet .personal-color-preview{width:36%;max-height:150px}.personal-color-sheet input[type=color]{width:55%}.personal-color-sheet label{margin-top:16px}.personal-upload-tray{grid-template-columns:repeat(2,minmax(0,1fr))}}
.personal-color-sheet .window-actions button{min-height:46px;padding:11px 17px;border:1px solid #b69ca7;border-radius:5px;background:var(--paper);color:var(--burgundy);font:600 13px/1.5 var(--font-body);cursor:pointer}.personal-color-sheet .window-actions button:first-child{background:var(--burgundy);color:var(--paper)}.personal-color-sheet .window-actions{gap:10px;box-shadow:0 -8px 12px var(--paper)}
/* Patterned presentation folders, inspired by the supplied material reference. */
.asset-upload-quick,.asset-folder-back{min-height:46px;padding:11px 14px;border:1px solid #c6adbb;border-radius:5px;background:var(--paper);color:var(--burgundy);font:600 12px/1.5 var(--font-body);cursor:pointer}.asset-upload-quick{margin-bottom:12px;width:100%}.asset-folder-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px;padding:12px 2px 24px}.asset-folder-grid .asset-folder{padding:14px 4px 9px;min-height:156px;gap:6px;outline-offset:3px}.asset-folder-grid .folder-shape{width:106px;height:83px;margin:6px 0 13px}.asset-folder-grid .asset-folder strong{font-size:12px;line-height:1.4;max-width:100%}.asset-folder-grid .asset-folder>span:last-child{font-size:10px;line-height:1.5}.asset-folder-grid .folder-front__stamp{font-size:4px}.asset-folder-preview{position:absolute;inset:4% 12% auto;width:76%;height:60%;object-fit:contain;transform:rotate(-5deg);filter:drop-shadow(1px 2px 2px #44233122)}
.asset-folder:nth-child(1) .folder-front{background:repeating-linear-gradient(0deg,transparent 0 12px,#b17c9629 12px 15px,transparent 15px 19px),repeating-linear-gradient(90deg,transparent 0 12px,#b17c9629 12px 15px,transparent 15px 19px),linear-gradient(120deg,#f4dce3,#d4a6b8)}
.asset-folder:nth-child(2) .folder-front{background:radial-gradient(ellipse at 15% 0%,#fff9,transparent 75%),radial-gradient(ellipse,#c9b8a850 1px,transparent 2px) 0 0/9px 12px,linear-gradient(120deg,#fff7e5,#dfcaa9)}
.asset-folder:nth-child(3) .folder-front{background:radial-gradient(circle,#73334b99 1px,transparent 1.8px) 0 0/13px 13px,radial-gradient(ellipse at var(--light-x,25%) 0%,#fff8,transparent 75%),linear-gradient(120deg,#f7dfe5,#d6a9b8)}
.asset-folder:nth-child(4) .folder-front{background:repeating-radial-gradient(ellipse at 0% 50%,#fff5 0 1px,transparent 2px 7px),linear-gradient(120deg,#f8e6e2,#d6b4a9)}
.asset-folder:nth-child(5) .folder-front{background:repeating-linear-gradient(45deg,transparent 0 8px,#dba7bc33 8px 9px,transparent 9px 15px),linear-gradient(120deg,#fff5ec,#e4c8c0)}
.asset-folder-content{position:relative;padding:20px 13px 16px;border:1px solid #d8c7b9;border-radius:8px;background:linear-gradient(125deg,#fffdf8,#f2e8dc);box-shadow:inset 1px 1px #fff,1px 3px 0 #dacbbc,0 9px 20px #44233110}.asset-folder-title{font:600 20px/1.3 var(--font-body);margin:20px 0}.asset-folder-back{width:100%;text-align:left}.asset-folder-files{min-width:0}.asset-folder-files .personal-uploads{border:0;padding:0;margin:0}.asset-folder-files .personal-uploads h4:first-child{display:none}.personal-upload-item{min-width:0}.personal-upload-item>button{width:100%}.personal-upload-item>button:last-child{font:500 10px/1.4 var(--font-body);min-height:44px;padding:8px 3px;margin-top:7px;border:1px solid #d8c4c0;color:var(--burgundy);background:#fffaf4}.personal-upload-tray .upload-empty{grid-column:1/-1;line-height:1.8;padding:16px 12px;border:1px dashed #cbb3bf;border-radius:4px}
.tray-scallop{display:block;width:60px;height:60px;background:#dca7bc;clip-path:polygon(50% 0%,60% 8%,73% 7%,78% 20%,91% 25%,91% 39%,100% 50%,91% 61%,91% 75%,78% 80%,73% 93%,60% 92%,50% 100%,40% 92%,27% 93%,22% 80%,9% 75%,9% 61%,0% 50%,9% 39%,9% 25%,22% 20%,27% 7%,40% 8%)}.tray-shape{display:block;width:60px;height:50px;background:#dca7bc;border:2px solid #692a42;border-radius:7px}.sticker-tray button{min-width:0;overflow-wrap:anywhere}.sticker-tray button:active{transform:translateY(2px) scale(.98)}
@media(hover:hover){.sticker-tray button:hover{transform:translateY(-4px) rotate(-1deg)}}
@media(max-width:700px){.asset-folder-grid{gap:16px 8px}.asset-folder-grid .folder-shape{width:112px;height:89px}.asset-folder-grid .asset-folder{min-height:164px}.asset-folder-content{padding:17px 11px}.asset-folder-files .sticker-tray{gap:9px}.asset-folder-files .sticker-tray button{min-height:110px;padding:10px 6px}.asset-folder-files .personal-upload-tray{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.sticker-tray button:hover,.sticker-tray button:active{transform:none}}
.sticker-tray button[data-add=sparkle]::after{background:linear-gradient(120deg,transparent 15%,#ffffff88 var(--light-x,35%),transparent 70%)}
/* The full spectrum stays visible, rather than hidden behind the native picker. */
.visible-color-wheel{clear:both;margin:20px auto;max-width:280px}.visible-color-wheel canvas{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:1;margin:auto;border-radius:50%;touch-action:none;cursor:crosshair;box-shadow:0 6px 20px #30252a18}.visible-color-wheel canvas:focus-visible{outline:3px solid var(--burgundy);outline-offset:5px}.visible-color-wheel .field-help{font-size:11px!important;line-height:1.6!important;margin:12px 0 0!important}.color-sheet input[type=range]{accent-color:var(--burgundy)}