:root{--paper:#f5f2eb;--ink:#243b42;--muted:#657477;--line:#d9dcd3;--orange:#bd4f33;--white:#fffefa}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:9px;background:var(--white);color:var(--ink);padding:9px 15px}button:hover{border-color:var(--ink)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ce704d;outline-offset:3px}input:focus,select:focus,textarea:focus{outline:2px solid #ce704d;outline-offset:1px}button.primary{background:var(--ink);border-color:var(--ink);color:white}header{max-width:1480px;margin:auto;padding:24px 42px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-size:19px;font-weight:750;text-decoration:none;color:inherit}.brand small{display:block;font-size:9px;letter-spacing:3px;font-weight:600}.brandmark{font-family:Georgia,serif;font-size:42px;line-height:1;position:relative}.brandmark span{color:var(--orange);font:14px system-ui;position:absolute;bottom:0;right:-3px}.head-actions{display:flex;gap:10px}main{max-width:1400px;margin:auto;padding:0 42px}.intro{padding:44px 0 42px;display:flex;justify-content:space-between;align-items:center;gap:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--muted)}h1{font-size:clamp(30px,3.2vw,44px);line-height:1.35;letter-spacing:.03em;margin:13px 0 17px}.intro p:not(.eyebrow){margin:0;color:var(--muted);font-size:14px}.intro-art{display:flex;align-items:center;gap:14px;position:relative;padding:0 35px 20px}.intro-art span{width:90px;height:104px;border:1px solid var(--ink);border-radius:12px;display:grid;place-items:center;font-size:51px;box-shadow:4px 5px 0 #243b42}.intro-art span:nth-child(1){background:#e9b49d;transform:rotate(-9deg)}.intro-art span:nth-child(2){background:#d4dcbc;transform:rotate(4deg)}.intro-art span:nth-child(3){background:#eac96b;transform:rotate(12deg)}.intro-art small{position:absolute;bottom:-15px;right:35px;font-size:9px;letter-spacing:3px}.workspace{display:grid;grid-template-columns:210px 1fr;gap:35px;padding-top:25px;border-top:1px solid var(--line)}aside{padding-right:22px;border-right:1px solid var(--line)}nav{display:grid;gap:6px;margin-bottom:26px}nav button{text-align:left;border-color:transparent;background:transparent}nav button.active{background:var(--ink);color:white}nav button span{float:right}label{display:block;font-size:12px;font-weight:650;margin:15px 0 6px}input,select,textarea{border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:8px;padding:10px;width:100%;min-width:0}select{font-size:12px}.aside-note{font-size:11px;color:var(--muted);margin-top:30px}.search-row{display:flex;gap:12px}.search{margin:0;display:flex;align-items:center;flex:1;background:var(--white);border:1px solid var(--line);border-radius:9px;padding-left:14px}.search span{font-size:28px;line-height:1}.search input{border:0;background:transparent;padding:12px}.result-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0 16px}.result-heading h2{font-size:17px;margin:0}.result-heading span{font-size:12px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{border:1px solid var(--line);border-radius:12px;background:var(--white);overflow:hidden;display:flex;flex-direction:column}.card-band{height:62px;background:#e8e5d9;display:flex;align-items:center;justify-content:space-between;padding:12px 17px}.card:nth-child(4n+2) .card-band{background:#dce4d4}.card:nth-child(4n+3) .card-band{background:#ebd7c9}.card:nth-child(4n+4) .card-band{background:#e7dfb6}.card-band .symbol{font-size:27px}.card-band button{padding:1px 9px;background:transparent;font-size:23px;border:0}.card-band button[aria-pressed=true]{color:#9c4226}.card-content{padding:17px;flex:1;display:flex;flex-direction:column}.tag{font-size:10px;letter-spacing:.02em;color:var(--muted)}.card h3{font-size:15px;line-height:1.6;margin:7px 0 9px}.card p{font-size:12px;color:var(--muted);margin:0 0 17px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}.card-bottom small{font-size:10px;color:var(--muted)}.card-bottom button{font-size:12px;padding:5px 11px}.pagination{display:flex;justify-content:center;gap:24px;align-items:center;margin:28px 0 40px}.pagination span{font-size:12px}.empty{grid-column:1/-1;padding:55px 20px;text-align:center;border:1px dashed var(--line);border-radius:12px}footer{border-top:1px solid var(--line);max-width:1400px;padding:22px 42px;margin:30px auto 0;font-size:11px;display:flex;justify-content:space-between;gap:16px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:18px;background:var(--white);color:var(--ink);width:min(680px,94vw);padding:26px;max-height:90dvh;overflow:auto;box-shadow:0 25px 100px #102d3340}dialog::backdrop{background:#152c3a70;backdrop-filter:blur(3px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head button{font-size:24px;padding:0 10px}dialog h2{font-size:22px;margin:12px 0}#editor-meta,.help{font-size:11px;color:var(--muted)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}textarea{resize:vertical;font-size:13px;line-height:1.85}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.notice{background:#f4ead9;padding:10px;border-radius:8px;font-size:12px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:12px;background:var(--ink);color:white;box-shadow:0 4px 30px #0003;font-size:13px;z-index:10;max-width:90vw}.mobile{display:none}[hidden]{display:none!important}@media(min-width:1500px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-art{display:none}main{padding:0 25px}header{padding:20px 25px}.workspace{gap:22px;grid-template-columns:185px 1fr}}@media(max-width:650px){header{padding:18px;flex-wrap:wrap}.brand{font-size:17px}.head-actions{width:100%}.head-actions button{font-size:12px;flex:1;padding:8px}main{padding:0 18px}.intro{padding:27px 0}.intro p:not(.eyebrow){font-size:12px}.workspace{display:block}aside{padding:0 0 18px;border-right:0}aside .eyebrow,.aside-note{display:none}nav{display:flex;gap:4px;margin:0 0 12px}nav button{font-size:11px;padding:7px;flex:1;text-align:center}nav button span{float:none;margin-left:4px}aside label{margin-top:8px}aside select{padding:7px}.grid{gap:10px}.card-content{padding:12px}.card h3{font-size:13px}.card-bottom{align-items:flex-start;flex-direction:column}.card-bottom button{width:100%}.card-band{height:48px;padding:8px 12px}.result-heading{margin-top:18px}footer{padding:18px;display:block}footer span{display:block}.fields{grid-template-columns:1fr}dialog{padding:18px}.dialog-actions button{font-size:12px}.search-row{gap:7px}.search-row>button{font-size:11px;padding:8px}.mobile{display:block}}@media(max-width:380px){.grid{grid-template-columns:1fr}.card-bottom{flex-direction:row;align-items:center}.card-bottom button{width:auto}}
:root .visual-guide{margin:0 0 30px}.visual-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:13px}.visual-heading h2{font-size:17px;margin:0}.visual-heading p{font-size:11px;color:var(--muted);margin:0}.demo-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.demo-choice{padding:0;overflow:hidden;border-radius:12px;text-align:left;background:var(--white);transition:transform .15s,border-color .15s}.demo-choice:hover{transform:translateY(-3px)}.demo-picture{display:block;width:100%;aspect-ratio:1;background-image:url('./demo-atlas.webp');background-size:300% 200%;background-repeat:no-repeat}.demo-0{background-position:0 0}.demo-1{background-position:50% 0}.demo-2{background-position:100% 0}.demo-3{background-position:0 100%}.demo-4{background-position:50% 100%}.demo-5{background-position:100% 100%}.demo-label{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font-size:12px;font-weight:650}.demo-label b{color:var(--orange)}@media(max-width:1000px){.demo-grid{gap:10px}.demo-label{padding:8px;font-size:11px}}@media(max-width:650px){.visual-heading{display:block}.visual-heading p{font-size:10px;margin-top:4px}.demo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-label{font-size:11px}.visual-guide{margin-bottom:22px}}
.demo-editor-image{max-width:300px;margin:15px auto;border-radius:12px}.demo-original{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:12px;margin:12px 0}.demo-original summary{cursor:pointer;font-weight:650}.demo-original pre{white-space:pre-wrap;font:12px/1.7 system-ui;color:var(--muted)}

.sample-thumb{display:block;width:100%;padding:0;border:0;background:#faf7f1;cursor:pointer}.sample-thumb img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.record-sample{display:block;width:100%;max-height:440px;object-fit:contain;margin:16px auto}.record-sample-note{margin:16px 0}.record-sample-note pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
.grid{align-items:start}.card-content{flex:initial}.review-badge{display:block;margin:0 0 12px;font-size:11px;color:var(--muted)}

.library{min-width:0}.library-tools{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.library-tools label{flex:1;min-width:130px}.library-tools button{margin-bottom:1px}.large-images{grid-template-columns:repeat(2,minmax(0,1fr))}.large-images .card-content>p{display:none}.record-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.record-actions a{color:var(--ink)}.record-actions small{color:var(--muted)}.card h3{overflow-wrap:anywhere}button,a,input,select{touch-action:manipulation}@media(max-width:650px){nav{flex-wrap:wrap}nav button{flex:1 1 30%;min-height:44px}.library-tools{gap:8px}.library-tools label{min-width:110px}.library-tools button{width:100%}.large-images{grid-template-columns:1fr}input,textarea,select{font-size:16px}dialog{width:96vw;max-height:94dvh}.dialog-actions{position:sticky;bottom:-18px;background:var(--white);padding:12px 0}.record-sample{max-height:50dvh}}

.card-bottom{flex-wrap:wrap}.record-related{border-top:1px solid var(--line);padding:12px 0}.record-related p{font-size:12px}.record-related button{display:block;margin:7px 0;text-align:left;width:100%}#compare-dialog{width:min(1200px,96vw)}#compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}#compare-grid section{min-width:0;border:1px solid var(--line);padding:14px;border-radius:12px}#compare-grid img{width:100%;aspect-ratio:1;object-fit:contain}#compare-grid p{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}#compare-grid h3{font-size:16px}#compare-grid textarea{font-size:16px}@media(max-width:650px){#compare-grid{grid-template-columns:1fr}.card-bottom button{min-height:40px}}

.card{cursor:pointer}.card:focus-visible{outline:3px solid #ce704d;outline-offset:3px}.card-bottom button{min-height:40px}.card-content>p{cursor:pointer}

.effect-panel{margin:20px 0;padding:16px;background:#f3f1e8;border:1px solid var(--line);border-radius:12px}.effect-panel h3{margin:0}.effect-panel p{font-size:12px;color:var(--muted)}.effect-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.effect-options label{display:flex;align-items:center;gap:8px;margin:0;padding:10px;background:var(--white);border:1px solid var(--line);border-radius:8px;cursor:pointer}.effect-options input{width:18px;height:18px;flex:none}.effect-panel textarea{font-size:14px}@media(max-width:500px){.effect-options{grid-template-columns:1fr}}