:root { --ink:#243547; --muted:#5a6d7e; --accent:#216c79; --line:#cedbdc; }
* { box-sizing:border-box; }
body { margin:0; background:#f4f7f8; color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button,select,input[type="color"],input[type="range"],summary { cursor:pointer; }
button { border:1px solid #afc4c8; border-radius:8px; background:white; color:#245562; min-height:44px; padding:9px 13px; font-size:.9rem; font-weight:600; line-height:1.35; }
button:not(:disabled):hover { background:#eaf4f5; border-color:var(--accent); }
button:disabled { cursor:default; opacity:.5; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible { outline:3px solid #c58a27; outline-offset:3px; }
.primary-button { background:var(--accent); border-color:var(--accent); color:white; }
.primary-button:not(:disabled):hover { background:#185763; color:white; }
.page-header { width:min(calc(100% - 40px),1300px); margin:0 auto; padding:20px 0 24px; }
.home-link { display:inline-flex; gap:8px; align-items:center; min-height:36px; font-size:.9rem; font-weight:650; color:var(--accent); text-decoration:none; }
.page-header h1 { margin:14px 0 8px; font-weight:650; font-size:clamp(2.1rem,5vw,3rem); letter-spacing:-.045em; }
.page-header>p { max-width:66ch; line-height:1.6; margin:0; font-size:1rem; color:var(--muted); }
.workspace { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; width:min(calc(100% - 40px),1300px); margin:0 auto; align-items:start; }
.controls-panel { background:white; border:1px solid #dce5e8; border-radius:14px; padding:22px; box-shadow:0 4px 16px rgb(36 53 71 / .04); }
h2 { font-size:1.1rem; font-weight:650; line-height:1.4; }
.controls-panel h2 { margin:0 0 18px; }
.quick-controls { grid-column:1; grid-row:1; }
.settings-panel { grid-column:1; grid-row:2; }
.quick-controls>label { display:block; margin:0 0 7px; font-weight:600; font-size:.85rem; }
.quick-controls .control-help { margin-bottom:12px; }
.refine-link,.preview-link { display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; color:var(--accent); text-underline-offset:3px; }
.refine-link { margin-top:7px; }
.preview-link { margin-top:-10px; margin-bottom:8px; }
#controls-title,#preview-title { scroll-margin-top:16px; }
#controls>label { display:block; margin:16px 0 7px; font-weight:600; font-size:.85rem; }
#controls>label:first-child { margin-top:0; }
select { display:block; width:100%; min-height:44px; padding:8px 10px; border:1px solid #bdccd1; border-radius:7px; background:white; color:var(--ink); font-size:.9rem; }
.control-help { margin:8px 0 14px; font-size:.78rem; color:var(--muted); line-height:1.5; }
fieldset { margin:14px 0; border:1px solid #dce5e8; padding:12px; border-radius:8px; }
fieldset[hidden] { display:none; }
fieldset legend { float:none; width:auto; font-size:.8rem; margin:0; padding:0 5px; }
.color-entry { display:flex; gap:8px; align-items:center; }
input[type="color"] { min-width:44px; width:44px; height:44px; padding:3px; background:white; border:1px solid #bdccd1; border-radius:6px; }
.color-entry button { flex:1; padding:7px; font-size:.8rem; }
.selected-colors { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.selected-colors button { width:36px; min-height:36px; padding:0; border:2px solid white; box-shadow:0 0 0 1px #bdccd1; }
.range-label { display:flex; justify-content:space-between; gap:12px; margin:18px 0 7px; font-size:.85rem; font-weight:600; }
.range-label output { min-width:20px; text-align:right; color:var(--accent); }
input[type="range"] { display:block; width:100%; min-height:32px; accent-color:var(--accent); }
#controls>.check-label { display:flex; gap:9px; align-items:center; min-height:36px; margin:5px 0; font-size:.85rem; font-weight:500; }
input[type="checkbox"] { width:18px; height:18px; accent-color:var(--accent); margin:0; }
.background-row { display:flex; align-items:center; justify-content:space-between; margin:14px 0 5px; font-size:.85rem; font-weight:600; }
#apply { width:100%; margin-top:18px; }
.variation-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:8px; }
.variation-actions button { padding:8px 5px; font-size:.8rem; }
.preview-panel { min-width:0; grid-column:2; grid-row:1 / span 2; }
.preview-heading { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-bottom:12px; }
.preview-heading h2 { margin:0 0 4px; }
#preview-meta { margin:0; font-size:.82rem; color:var(--muted); }
.history-actions { display:flex; gap:7px; }
.history-actions button { min-height:40px; padding:7px 11px; font-size:.8rem; }
.art-surface { display:flex; justify-content:center; align-items:center; min-height:200px; padding:12px; border:1px solid #c8d5db; border-radius:13px; background-color:#fff; background-image:linear-gradient(45deg,#e8edf0 25%,transparent 25%),linear-gradient(-45deg,#e8edf0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8edf0 75%),linear-gradient(-45deg,transparent 75%,#e8edf0 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
#art-preview { display:block; width:auto; height:auto; max-width:100%; max-height:min(68vh,760px); border-radius:2px; box-shadow:0 5px 20px rgb(36 53 71 / .12); }
.export-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
#status { margin:12px 0 0; min-height:3em; font-size:.9rem; line-height:1.5; }
#save-status { margin:0 0 14px; min-height:1.5em; font-size:.78rem; color:var(--muted); }
#save-status.warning { color:#9a4f19; }
.artwork-help { border-top:1px solid #d9e3e7; padding-top:14px; font-size:.85rem; line-height:1.6; color:var(--muted); }
.artwork-help summary { color:var(--accent); font-weight:650; }
.artwork-help p { margin:10px 0 0; }
.about-tool { width:min(calc(100% - 40px),900px); margin:34px auto 0; line-height:1.65; color:var(--muted); font-size:.9rem; }
.about-tool h2 { color:var(--ink); }
.about-tool p { margin-bottom:0; }
.site-ad { margin-top:40px; }
main { padding-bottom:24px; }
@media(max-width:760px) {
  .page-header { width:calc(100% - 28px); padding:12px 0 20px; }
  .page-header h1 { margin-top:10px; }
  .page-header>p { font-size:.9rem; }
  .workspace { display:flex; flex-direction:column; width:calc(100% - 28px); gap:24px; }
  .preview-panel { width:100%; }
  .controls-panel { width:100%; padding:18px; }
  .quick-controls { padding:16px 18px; }
  .quick-controls h2 { margin-bottom:10px; }
  .quick-controls .variation-actions button { font-size:.9rem; }
  .preview-heading { gap:8px; }
  .history-actions button { min-height:44px; padding:7px 9px; }
  .art-surface { min-height:140px; padding:8px; }
  #art-preview { max-height:60vh; }
  .export-actions { gap:8px; }
  .export-actions button { font-size:.85rem; padding:9px 6px; }
  .about-tool { width:calc(100% - 28px); margin-top:26px; }
}
@media print { .page-header,.controls-panel,.preview-heading,.export-actions,#status,#save-status,.artwork-help,.about-tool,.site-ad,.site-related { display:none!important; } .workspace { display:block; width:100%; } .art-surface { padding:0; border:0; background:none; } #art-preview { max-height:none; box-shadow:none; } }