:root { --ink:#20211d; --paper:#f2ede2; --panel:#fbf9f4; --line:#d8d0c2; --muted:#77756d; --accent:#a44438; --card:#a44438; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"Segoe UI",system-ui,sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.topbar { min-height:72px; padding:10px 4vw; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:rgba(250,247,240,.92); backdrop-filter:blur(12px); position:sticky; top:0; z-index:10; }
.product-identity{display:flex;align-items:center;gap:10px;min-width:0}.proto-brand{display:flex;align-items:center;gap:7px;color:var(--ink);text-decoration:none;font-weight:700;font-size:13px}.proto-brand img{width:28px;height:28px;object-fit:cover;border-radius:50%}.brand-divider{width:1px;height:30px;background:var(--line);margin:0 3px}.product-stage,.product-version{font-size:8px;text-transform:uppercase;letter-spacing:.11em;padding:5px 7px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}.product-stage{background:#e8eadf;color:#47523d}.product-version{color:#777168}
.brand { color:var(--ink); text-decoration:none; font-weight:700; display:flex; align-items:center; gap:10px; font-size:18px; }
.brand-mark { width:30px; height:38px; border:1.5px solid var(--ink); border-radius:4px; display:grid; place-items:center; font-family:serif; transform:rotate(-5deg); box-shadow:3px 3px 0 #cbbd9e; }
.top-actions { display:flex; align-items:center; gap:10px; }
.shell-link{color:#5f5b53;text-decoration:none;font-size:11px;font-weight:650;white-space:nowrap}.shell-link:hover{text-decoration:underline;text-underline-offset:4px}
.privacy { font-size:12px; color:#5c6455; margin-right:8px; display:flex; align-items:center; gap:7px; }
.privacy i { width:7px; height:7px; border-radius:50%; background:#6d825c; box-shadow:0 0 0 3px #dce5d5; }
.button { border:1px solid var(--line); border-radius:5px; padding:10px 16px; background:white; font-weight:600; }
.button.dark { background:var(--ink); color:white; border-color:var(--ink); }
.button.small { font-size:12px; padding:7px 10px; }
main { max-width:1480px; margin:auto; padding:52px 4vw 60px; }
.intro { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:38px; }
.eyebrow,.step { font-size:10px; letter-spacing:.2em; font-weight:700; margin:0 0 10px; color:#777267; }
h1 { font-size:clamp(40px,5vw,70px); line-height:.98; letter-spacing:-.045em; margin:0; max-width:720px; }
h1 em { font-family:Georgia,"Times New Roman",serif; font-weight:600; color:var(--accent); }
.lede { max-width:590px; margin:20px 0 0; color:#67665f; font-size:15px; line-height:1.6; }
.save-state { display:flex; align-items:center; gap:11px; font-size:12px; color:#65705e; background:#e7ecdf; padding:12px 16px; border-radius:7px; }
.save-state>span { border:1px solid #839077; border-radius:50%; width:22px; height:22px; display:grid; place-items:center; }
.save-state strong,.save-state small { display:block; }.save-state small{opacity:.75;margin-top:2px}
.save-state.error{color:#7d2f29;background:#f4deda}.save-state.error>span{border-color:#a44438}
.workspace { display:grid; grid-template-columns:250px minmax(360px,1fr) minmax(360px,.95fr); border:1px solid var(--line); min-height:650px; background:var(--panel); box-shadow:0 20px 60px rgba(51,43,31,.08); }
.panel { padding:26px; border-right:1px solid var(--line); }
.panel-heading,.preview-heading { display:flex; justify-content:space-between; align-items:center; }
h2 { margin:0; font-size:19px; }
.icon-button { border:1px solid var(--line); background:transparent; width:32px; height:32px; border-radius:5px; font-size:20px; display:grid; place-items:center; }
.card-list { margin-top:25px; display:flex; flex-direction:column; gap:20px; }
.type-group { min-width:0; }
.type-heading { display:flex; align-items:center; justify-content:space-between; margin:0 3px 7px; color:#6f6a61; text-transform:uppercase; letter-spacing:.13em; font-size:8px; }
.type-heading span { width:18px; height:18px; display:grid; place-items:center; border:1px solid #cfc6b8; border-radius:50%; letter-spacing:0; font-size:8px; }
.type-stack { padding-bottom:3px; }
.type-stack .card-item + .card-item { margin-top:-8px; box-shadow:0 -4px 10px #5f53410a; }
.type-stack .card-item:hover,.type-stack .card-item.active { transform:translateX(5px); z-index:2; }
.card-item { width:100%; text-align:left; display:flex; align-items:center; gap:12px; padding:9px; border:1px solid #ded7cb; border-radius:7px; background:#f9f6ef; color:var(--ink); position:relative; transition:.15s; }
.card-item:hover { background:#f2eee5; }.card-item.active { background:#ece5d8; border-color:#d6ccbb; }
.mini-card { width:29px; height:41px; border:2px solid var(--mini-border); border-radius:3px; background:var(--mini); color:white; display:grid; place-items:center; font-size:12px; box-shadow:0 2px 5px #0002; flex:0 0 auto; overflow:hidden; }
.card-item span { min-width:0; }.card-item strong,.card-item small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.card-item strong{font-size:12px}.card-item small{font-size:10px;color:var(--muted);margin-top:3px}
.add-card { width:100%; margin-top:15px; border:1px dashed #bbb2a4; padding:12px; border-radius:6px; background:transparent; color:#67635a; font-size:12px; }.add-card span{font-size:16px;margin-right:6px}
.card-counter { font-size:10px; color:#969086; text-align:center; margin-top:14px; }
.editor { background:#fffdf8; }
.editor-heading { padding-bottom:23px; border-bottom:1px solid #e6e0d5; }
.editor-actions{display:flex;gap:7px}.button.danger{color:#8f332d;border-color:#d9aaa4;background:#fff8f6}
form { padding-top:22px; }
.field { display:block; margin-bottom:18px; position:relative; }.field-row{display:flex;gap:12px}.grow{flex:1}.symbol-field{width:80px}
.field>span,.color-field legend { display:block; font-size:9px; letter-spacing:.14em; font-weight:700; color:#767168; margin-bottom:7px; }
.field input,.field textarea { width:100%; border:1px solid #d8d1c5; border-radius:5px; padding:11px 12px; background:#fff; outline:none; resize:vertical; transition:.15s; }
.field input:focus,.field textarea:focus { border-color:#8d8170; box-shadow:0 0 0 3px #ded7ca66; }
.field small { position:absolute; right:8px; bottom:7px; font-size:9px; color:#aaa39a; background:white; padding:2px; }
.field .field-hint { position:static; display:block; margin:5px 0 0; background:transparent; padding:0; font-size:9px; font-weight:400; letter-spacing:0; text-transform:none; }
.field .field-message{position:static;display:block;min-height:14px;margin-top:5px;color:#8f4a39;font-size:9px;letter-spacing:0;font-weight:500}
.color-field { border:0; padding:0; margin:0 0 19px; }.swatches{display:flex;gap:11px}
.swatch { width:25px;height:25px;border:0;border-radius:50%;background:var(--swatch);position:relative }.swatch.active:after{content:"";position:absolute;inset:-4px;border:1px solid var(--swatch);border-radius:50%}
.design-section { border:1px solid #ded7ca; background:#f8f4ec; border-radius:8px; padding:15px; margin:23px 0 18px; }
.design-heading { display:flex; align-items:center; gap:10px; padding-bottom:13px; margin-bottom:15px; border-bottom:1px solid #ded7ca; }
.design-heading>span { width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:white;font-size:8px; }
.design-heading strong,.design-heading small { display:block; }.design-heading strong{font-size:12px}.design-heading small{font-size:9px;color:#8b8479;margin-top:2px}
.option-field { border:0; padding:0; margin:0 0 17px; }
.option-field:last-child { margin-bottom:0; }
.option-field legend { display:block; font-size:9px; letter-spacing:.14em; font-weight:700; color:#767168; margin-bottom:8px; }
.size-options select{width:100%;border:1px solid #d8d1c5;border-radius:5px;background:#fff;padding:10px;color:var(--ink)}.custom-card-size{display:none;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;margin-top:9px}.custom-card-size.visible{display:grid}.custom-card-size label{display:grid;grid-template-columns:1fr auto;gap:5px;align-items:center}.custom-card-size label>span{grid-column:1/-1;font-size:8px;color:#777168}.custom-card-size input{min-width:0;width:100%;border:1px solid #d8d1c5;border-radius:5px;padding:8px}.custom-card-size small{font-size:9px;color:#777168}.size-hint{display:block;margin-top:7px;color:#777168;font-size:9px}
.layout-options { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.layout-option { cursor:pointer; min-width:0; }
.layout-option input { position:absolute; opacity:0; pointer-events:none; }
.layout-sample { height:58px; display:block; position:relative; overflow:hidden; border:2px solid transparent; border-radius:5px; background:#a86458; box-shadow:inset 0 0 0 1px #ffffff60; }
.layout-option.active .layout-sample { border-color:#211f1b; box-shadow:inset 0 0 0 1px #fff; }
.layout-option small { display:block; text-align:center; font-size:7px; color:#777168; margin-top:5px; overflow:hidden; text-overflow:ellipsis; }
.layout-sample i,.layout-sample b,.layout-sample em { position:absolute; display:block; background:#ffffffa6; }
.layout-sample i { left:6px;right:6px;top:7px;height:24px; }.layout-sample b{left:7px;right:17px;bottom:14px;height:3px}.layout-sample em{left:7px;right:9px;bottom:7px;height:3px;opacity:.6}
.layout-sample-split i { top:0;bottom:0;left:0;width:48%;height:auto;right:auto; }.layout-sample-split b{left:56%;right:6px;top:12px;bottom:auto}.layout-sample-split em{left:56%;right:8px;top:21px;bottom:auto;height:15px;opacity:.55}
.layout-sample-poster i { inset:6px 6px 18px;height:auto;background:#ffffff48 }.layout-sample-poster b{left:10px;right:10px;bottom:11px;height:5px}.layout-sample-poster em{display:none}
.layout-sample-minimal i { width:18px;height:18px;border-radius:50%;left:50%;top:9px;right:auto;transform:translateX(-50%);background:transparent;border:1px solid #fff }.layout-sample-minimal b{left:11px;right:11px;bottom:16px}.layout-sample-minimal em{left:16px;right:16px;bottom:9px}
.layout-sample-fullart { background:linear-gradient(145deg,#d0a56f,#815949 48%,#293c3a); }.layout-sample-fullart i{inset:0;height:auto;background:linear-gradient(transparent 35%,#111b)}.layout-sample-fullart b{left:7px;right:10px;bottom:13px;height:4px}.layout-sample-fullart em{left:7px;right:18px;bottom:7px;height:3px}
.text-panel-options{display:none}.text-panel-options.visible{display:block}.panel-shapes{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.panel-shape{min-width:0;cursor:pointer}.panel-shape input{position:absolute;opacity:0}.panel-shape>span{height:34px;display:block;background:#fff;border:2px solid transparent;box-shadow:inset 0 0 0 1px #c7bdaf}.panel-shape.active>span{border-color:#262520}.panel-shape small{display:block;text-align:center;font-size:7px;color:#777168;margin-top:4px;overflow:hidden;text-overflow:ellipsis}.panel-shape .shape-rounded{border-radius:10px}.panel-shape .shape-scroll{clip-path:polygon(8% 0,92% 0,100% 16%,93% 50%,100% 84%,92% 100%,8% 100%,0 84%,7% 50%,0 16%)}.panel-shape .shape-ribbon{clip-path:polygon(0 12%,10% 12%,10% 0,90% 0,90% 12%,100% 12%,93% 50%,100% 88%,90% 88%,90% 100%,10% 100%,10% 88%,0 88%,7% 50%)}.panel-shape .shape-glass{border-radius:16px 4px 16px 4px;background:#ffffff88;backdrop-filter:blur(3px)}.panel-colors{display:flex;gap:9px;margin-top:12px}.panel-color{width:22px;height:22px;border:0;border-radius:50%;background:var(--panel-color);box-shadow:0 0 0 1px #bdb4a6}.panel-color.active{outline:2px solid #262520;outline-offset:2px}
.visual-options { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.visual-option,.border-option { cursor:pointer; min-width:0; }
.visual-option input,.border-option input { position:absolute; opacity:0; pointer-events:none; }
.pattern-sample { height:42px; display:block; border-radius:5px; background:#8f5a50; border:2px solid transparent; position:relative; overflow:hidden; }
.visual-option.active .pattern-sample { border-color:#211f1b; box-shadow:0 0 0 2px #fff inset; }
.visual-option small { display:block; text-align:center; font-size:8px; color:#777168; margin-top:5px; overflow:hidden; text-overflow:ellipsis; }
.pattern-sample:after,.mini-card:after { content:""; position:absolute; pointer-events:none; }
.pattern-sample.pattern-arc:after,.mini-card.pattern-arc:after { width:48px;height:48px;border:1px solid #ffffff52;border-radius:50%;left:-26px;bottom:-30px;box-shadow:0 0 0 7px #ffffff12,0 0 0 14px #ffffff0d; }
.pattern-sample.pattern-rings:after,.mini-card.pattern-rings:after { width:50px;height:50px;border:1px solid #ffffff4d;border-radius:50%;right:-32px;top:2px;box-shadow:0 0 0 7px #ffffff12,0 0 0 14px #ffffff0d; }
.pattern-sample.pattern-rays:after,.mini-card.pattern-rays:after { width:65px;height:65px;left:-8px;bottom:-38px;background:repeating-conic-gradient(#ffffff2b 0 10deg,transparent 10deg 24deg);border-radius:50%; }
.pattern-sample.pattern-grid:after,.mini-card.pattern-grid:after { inset:0;background-image:linear-gradient(#ffffff21 1px,transparent 1px),linear-gradient(90deg,#ffffff21 1px,transparent 1px);background-size:9px 9px; }
.pattern-sample.pattern-plain:after,.mini-card.pattern-plain:after { display:none; }
.border-options { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.border-option { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid #d8d0c2; border-radius:5px; background:#fff; }
.border-option.active { border-color:#34332e; box-shadow:0 0 0 1px #34332e; }
.border-dot { width:17px;height:17px;background:var(--dot);border:1px solid #c4bbaa;border-radius:50%;flex:0 0 auto; }
.border-option small { font-size:9px; color:#69645c; }
.image-drop { display:flex; gap:12px; align-items:center; border:1px dashed #bdb5a8; padding:13px; border-radius:6px; cursor:pointer; color:#5f5b53; }.image-drop:hover{background:#f7f2e9}.image-drop strong,.image-drop small{display:block;font-size:11px}.image-drop small{color:#999187;margin-top:3px}.upload-icon{font-size:22px}
.remove-image { border:0;background:transparent;color:#9a433a;font-size:10px;padding:8px 0;display:none }
.image-position { display:none; margin:9px 0 4px; padding:12px; border:1px solid #ded7cb; border-radius:6px; background:#f8f4ec; }.image-position.visible{display:block}.image-position>div{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.image-position strong{font-size:10px}.image-position button{border:0;background:transparent;color:#8a4b42;font-size:9px}.image-position label{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:8px;font-size:9px;color:#777168}.image-position input{accent-color:var(--accent)}
.scope-options { display:grid;grid-template-columns:1fr 1fr;gap:7px }.scope-options label{position:relative}.scope-options input{position:absolute;opacity:0}.scope-options span{display:block;border:1px solid #d8d0c2;background:white;border-radius:5px;padding:9px;text-align:center;font-size:9px;cursor:pointer}.scope-options input:checked+span{border-color:#292823;box-shadow:0 0 0 1px #292823}
.back-toggle{display:flex;gap:9px;align-items:center;padding:10px;margin-bottom:3px;border:1px solid #d8d0c2;border-radius:6px;background:#fff}.back-toggle input{accent-color:#292823}.back-toggle strong,.back-toggle small{display:block}.back-toggle strong{font-size:10px}.back-toggle small{font-size:8px;color:#777168;margin-top:2px}
.back-presets { display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.back-preset{cursor:pointer;min-width:0}.back-preset input{position:absolute;opacity:0}.back-sample{height:62px;border:2px solid transparent;border-radius:5px;display:grid;place-items:center;overflow:hidden;position:relative;color:white}.back-preset.active .back-sample{border-color:#1e1e1b;box-shadow:inset 0 0 0 2px white}.back-sample i{z-index:2;font-family:Georgia,serif;font-size:12px;font-style:normal;border:1px solid #ffffffaa;padding:5px;border-radius:50%}.back-preset small{display:block;text-align:center;font-size:7px;margin-top:5px;color:#777168}.back-geometric{background-color:#344c68;background-image:linear-gradient(30deg,#ffffff16 12%,transparent 12.5%,transparent 87%,#ffffff16 87.5%),linear-gradient(150deg,#ffffff16 12%,transparent 12.5%,transparent 87%,#ffffff16 87.5%);background-size:18px 32px}.back-noble{background:#30263b}.back-noble:after{content:"";position:absolute;inset:7px;border:1px double #c9a95f;border-radius:2px}.back-modern{background:linear-gradient(145deg,#d8c5a2 0 45%,#a54c42 45% 58%,#2e5260 58%)}.back-wild{background:repeating-conic-gradient(#db5c45 0 12deg,#f2bd43 12deg 24deg,#4d8f83 24deg 36deg,#5a4a7c 36deg 48deg)}.image-drop.compact{padding:10px}
.border-none { border-width:0!important; padding:10px; }
.preview-area { background:#e7e0d3; padding:26px 32px; display:flex; flex-direction:column; }
.icon-button.light{background:#f7f2e8}.card-stage { flex:1; min-height:470px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px 16px; padding:28px 0; }.preview-card-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}.preview-card-wrap>span{font-size:8px;letter-spacing:.15em;font-weight:700;color:#807970}.back-preview-wrap[hidden]{display:none}.back-preview{display:grid;place-items:center;color:white;background-size:cover;background-position:center;position:relative;border-color:#f5efe4}.back-preview>div{text-align:center;position:relative;z-index:2}.back-preview b,.back-preview small{display:block}.back-preview b{font:28px Georgia,serif;border:1px solid #ffffffaa;border-radius:50%;width:62px;height:62px;line-height:62px;margin:auto}.back-preview small{text-transform:uppercase;letter-spacing:.18em;margin-top:10px}.back-preview.custom-back>div{display:none}
.playing-card { width:min(var(--preview-card-width,264px),78vw); height:min(var(--preview-card-height,369.6px),calc(78vw * var(--preview-card-ratio,1.4))); border:7px solid var(--card-border,var(--card)); border-radius:14px; background:var(--card); padding:3px; box-shadow:0 25px 35px #4b42365c,0 3px 0 #0003; transition:background .2s,border-color .2s,transform .2s; }
.playing-card:hover{transform:translateY(-3px) rotate(.4deg)}
.card-inner { height:100%; border:1px solid #ffffff99; border-radius:9px; color:white; padding:15px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.card-inner:before,.card-inner:after { content:""; position:absolute; pointer-events:none; }
.pattern-arc .card-inner:after { width:180px;height:180px;border:1px solid #ffffff24;border-radius:50%;left:-90px;bottom:-100px;box-shadow:0 0 0 22px #ffffff0a,0 0 0 45px #ffffff0a; }
.pattern-rings .card-inner:after { width:260px;height:260px;border:1px solid #ffffff20;border-radius:50%;right:-170px;top:45px;box-shadow:0 0 0 24px #ffffff0a,0 0 0 48px #ffffff0a,0 0 0 72px #ffffff08; }
.pattern-rays .card-inner:after { width:280px;height:280px;left:-60px;bottom:-150px;background:repeating-conic-gradient(from 8deg,#ffffff13 0 8deg,transparent 8deg 20deg);border-radius:50%; }
.pattern-grid .card-inner:after { inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:22px 22px; }
.pattern-plain .card-inner:after { display:none; }
.card-inner>* { position:relative; z-index:1; }
.card-inner header { display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;font-size:8px;letter-spacing:.15em;min-height:26px }.preview-symbol{font-size:19px}
.art { height:150px;border:1px solid #ffffff60;background:#1d1d1b26;display:grid;place-items:center;margin:8px 0 16px;background-size:cover;background-position:center;position:relative;overflow:hidden}.art:after{content:"";position:absolute;inset:7px;border:1px solid #ffffff2e}.art span{font-size:54px;text-shadow:0 5px 18px #0005}
.art[style*="background-image"]{cursor:grab;touch-action:none}.art.dragging{cursor:grabbing}
.card-copy h3 { font-family:Georgia,serif;font-size:25px;line-height:1;margin:0 0 11px;letter-spacing:-.02em}.rule{height:1px;background:#ffffff77}.card-copy p{font-family:Georgia,serif;font-size:11px;line-height:1.48;margin:12px 0;white-space:pre-wrap}
.playing-card.long-copy .card-copy p{font-size:9.5px;line-height:1.38}.playing-card.very-long-copy .card-copy p{font-size:8.5px;line-height:1.3}
.card-inner footer { margin-top:auto;border-top:1px solid #ffffff58;padding-top:8px;display:flex;justify-content:space-between;font-size:7px;text-transform:uppercase;letter-spacing:.08em;z-index:1 }.card-inner footer span:first-child{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layout-split .card-inner { display:grid; grid-template-columns:46% 54%; grid-template-rows:auto 1fr auto; gap:0 12px; }
.layout-split .card-inner header { grid-column:2;grid-row:1;padding-left:2px }.layout-split .art{grid-column:1;grid-row:1/-1;height:auto;margin:-15px 0 -15px -15px;border-width:0;border-radius:8px 0 0 8px}.layout-split .art:after{inset:8px}.layout-split .card-copy{grid-column:2;grid-row:2;align-self:center}.layout-split .card-copy h3{font-size:20px}.layout-split .card-copy p{font-size:9px}.layout-split .card-inner footer{grid-column:2;grid-row:3}
.layout-split.very-long-copy .card-copy h3{font-size:15px;margin-bottom:5px}.layout-split.very-long-copy .card-copy p{font-size:6.8px;line-height:1.16;margin:5px 0}
.layout-poster .art { height:215px;margin-bottom:10px; }.layout-poster .card-copy{background:var(--text-panel);color:var(--panel-ink);margin:-38px -7px 0;padding:12px 11px;z-index:3;position:relative}.layout-poster.panel-rounded .card-copy{border-radius:13px}.layout-poster.panel-scroll .card-copy{clip-path:polygon(6% 0,94% 0,100% 12%,96% 50%,100% 88%,94% 100%,6% 100%,0 88%,4% 50%,0 12%);padding-left:18px;padding-right:18px}.layout-poster.panel-ribbon .card-copy{clip-path:polygon(0 8%,7% 8%,7% 0,93% 0,93% 8%,100% 8%,96% 50%,100% 92%,93% 92%,93% 100%,7% 100%,7% 92%,0 92%,4% 50%);padding-left:18px;padding-right:18px}.layout-poster.panel-glass .card-copy{background:color-mix(in srgb,var(--text-panel) 70%,transparent);backdrop-filter:blur(7px);border:1px solid #ffffff78;border-radius:18px 4px}.layout-poster .card-copy h3{font-size:22px;margin-bottom:6px}.layout-poster .card-copy p{font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:9px;margin:7px 0}.layout-poster .rule{background:currentColor;opacity:.35}.layout-poster .card-inner footer{margin-top:8px}
.layout-minimal .art { width:76px;height:76px;border-radius:50%;margin:30px auto 25px;background:transparent;border:1px solid #ffffff7a}.layout-minimal .art:after{border-radius:50%;inset:6px}.layout-minimal .card-copy{text-align:center}.layout-minimal .card-copy h3{font-size:29px}.layout-minimal .card-copy p{max-width:190px;margin:14px auto}.layout-minimal .rule{width:45px;margin:auto}
.layout-fullart .card-inner { background:linear-gradient(transparent 30%,#111111d9 78%); }
.layout-fullart .art { position:absolute;z-index:0;inset:0;width:auto;height:auto;margin:0;border:0;background-size:cover;background-position:center;opacity:.92; }
.layout-fullart .art:after { inset:0;border:0;background:linear-gradient(transparent 34%,#111111e8 84%); }
.layout-fullart .art span { font-size:105px;opacity:.23; }
.layout-fullart .card-copy { margin-top:auto;padding:15px 2px 8px;z-index:2}.layout-fullart .card-copy h3{font-size:32px;text-shadow:0 2px 10px #000}.layout-fullart .card-copy p{font-size:11px;text-shadow:0 1px 5px #000}.layout-fullart .card-inner footer{margin-top:0}.layout-fullart .card-inner header{z-index:2;text-shadow:0 1px 5px #000}
.layout-fullart.long-copy .card-copy{padding-top:6px}.layout-fullart.long-copy .card-copy h3{font-size:25px;margin-bottom:5px}.layout-fullart.very-long-copy .card-copy h3{font-size:21px}.layout-fullart.very-long-copy .card-copy p{font-size:6.8px;line-height:1.16;margin:5px 0}
.playing-card.back-preview.back-geometric{background-color:#344c68;background-image:linear-gradient(30deg,#ffffff16 12%,transparent 12.5%,transparent 87%,#ffffff16 87.5%),linear-gradient(150deg,#ffffff16 12%,transparent 12.5%,transparent 87%,#ffffff16 87.5%);background-size:28px 48px}.playing-card.back-preview.back-noble{background-color:#30263b}.playing-card.back-preview.back-modern{background:linear-gradient(145deg,#d8c5a2 0 45%,#a54c42 45% 58%,#2e5260 58%)}.playing-card.back-preview.back-wild{background:repeating-conic-gradient(#db5c45 0 12deg,#f2bd43 12deg 24deg,#4d8f83 24deg 36deg,#5a4a7c 36deg 48deg)}.playing-card.back-preview.custom-back{background-color:#333;background-size:cover;background-position:center}.playing-card.back-preview.border-none{border:0;padding:10px}
.tip { display:flex; gap:10px; font-size:10px; line-height:1.45; color:#706b62; max-width:290px; margin:0 auto; }.tip>span:first-child{color:var(--accent)}.tip strong{display:block;color:#514e48;text-transform:uppercase;letter-spacing:.12em;font-size:8px}
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:#22231f;color:white;padding:11px 16px;border-radius:6px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:20 }.toast.show{opacity:1;transform:translate(-50%,0)}
button:focus-visible,input:focus-visible,textarea:focus-visible,label:has(input:focus-visible) span{outline:3px solid #376b8c;outline-offset:3px}
.print-dialog { width:min(720px,94vw);max-height:90vh;border:0;border-radius:12px;padding:0;box-shadow:0 30px 80px #0005;background:#fbf8f1;color:var(--ink)}.print-dialog::backdrop{background:#27251fcc;backdrop-filter:blur(3px)}.print-panel{padding:25px}.print-panel>header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:18px}.print-panel>header button{border:0;background:transparent;font-size:26px}.print-panel fieldset{border:0;padding:18px 0 0;margin:0}.print-panel legend{font-size:9px;letter-spacing:.14em;font-weight:700;color:#777168}.print-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.print-modes label{position:relative}.print-modes input{position:absolute;opacity:0}.print-modes span{display:block;text-align:center;padding:10px;border:1px solid var(--line);border-radius:5px;background:white;font-size:10px;cursor:pointer}.print-modes input:checked+span{background:#292823;color:white;border-color:#292823}.print-card-list{margin:18px 0;max-height:260px;overflow:auto;border-top:1px solid var(--line)}.print-row{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;padding:10px 4px;border-bottom:1px solid #e4ddd1}.print-row>span strong,.print-row>span small{display:block}.print-row>span strong{font-size:11px}.print-row>span small{font-size:9px;color:#8a8479}.quantity{display:flex;align-items:center;gap:7px;font-size:9px;color:#777168}.quantity input{width:52px;padding:6px;border:1px solid var(--line);border-radius:4px}.duplex-option{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--line);border-radius:6px;background:white}.duplex-option span strong,.duplex-option span small{display:block}.duplex-option span strong{font-size:11px}.duplex-option span small{font-size:9px;color:#777168;margin-top:3px}.print-note{font-size:9px;line-height:1.5;color:#817b72;background:#eee8dc;padding:10px;border-radius:5px}.print-panel>footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.print-output{display:none}
.site-footer{max-width:1480px;margin:0 auto;padding:5px 4vw 34px;display:flex;justify-content:space-between;gap:20px;color:#777168;font-size:10px}.site-footer p{margin:0}.site-footer nav{display:flex;gap:18px;flex-wrap:wrap}.site-footer a{color:inherit;text-underline-offset:3px}
@media(min-width:1001px){.preview-area{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 104px);overflow:auto}}
@media(max-width:1120px){.product-stage,.product-version,.proto-brand span{display:none}.top-actions .shell-link{display:none}}
@media(max-width:1000px){.workspace{grid-template-columns:220px 1fr}.preview-area{grid-column:1/-1;border-top:1px solid var(--line);position:static;max-height:none;overflow:visible}.card-stage{min-height:430px}.privacy{display:none}}
@media(max-width:680px){.topbar{height:auto;padding:12px 16px;align-items:flex-start}.product-identity{gap:7px}.brand-divider{height:25px}.brand{font-size:15px}.brand-mark{width:25px;height:32px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.button{padding:8px 10px;font-size:11px}main{padding:32px 14px}.intro{display:block}.save-state{margin-top:20px;width:max-content}.workspace{display:block}.panel{border-right:0;border-bottom:1px solid var(--line)}.sidebar{padding-bottom:18px}.card-list{flex-direction:row;overflow:auto;align-items:flex-start;padding-bottom:8px}.type-group{min-width:170px}.card-item{min-width:170px}.preview-area{padding:25px 18px}.playing-card{width:min(264px,78vw)}.lede{font-size:14px}.visual-options{grid-template-columns:repeat(5,minmax(48px,1fr))}.site-footer{padding:0 16px 28px;flex-direction:column}}
@page{size:A4 portrait;margin:6mm}
@media print{*{print-color-adjust:exact;-webkit-print-color-adjust:exact}body{background:white}body>:not(.print-output){display:none!important}.print-output{display:block!important}.print-page{width:198mm;height:285mm;display:grid;grid-template-columns:repeat(var(--print-columns),var(--print-card-width));grid-template-rows:repeat(var(--print-rows),var(--print-card-height));gap:var(--print-gap);align-content:start;justify-content:start;page-break-after:always}.print-page:last-child{page-break-after:auto}.print-card,.print-blank{width:var(--print-card-width);height:var(--print-card-height);overflow:hidden;box-shadow:none}.print-front{border:2mm solid var(--card-border,var(--card));border-radius:3mm;background:var(--card);padding:1mm;color:white}.print-front.border-none{border:0;padding:3mm}.print-front .card-inner{padding:3.4mm;border-radius:2mm}.print-front .art{height:41%;margin:2mm 0 3mm}.print-front .card-copy h3{font-size:6mm}.print-front .card-copy p{font-size:2.6mm}.print-front.layout-split .art{height:auto;margin:-3.4mm 0 -3.4mm -3.4mm}.print-front.layout-poster .art{height:58%}.print-front.layout-fullart .art{height:auto;margin:0}.print-back{border:2mm solid var(--back-border,transparent);border-radius:3mm;background-size:cover;background-position:center;position:relative}.print-back.border-none{border:0}.print-back.back-geometric{background-color:#344c68;background-image:linear-gradient(30deg,#ffffff16 12%,transparent 12.5%,transparent 87%,#ffffff16 87.5%),linear-gradient(150deg,#ffffff16 12%,transparent 12.5%,transparent 87%,#ffffff16 87.5%);background-size:8mm 14mm}.print-back.back-noble{background:#30263b}.print-back.back-modern{background:linear-gradient(145deg,#d8c5a2 0 45%,#a54c42 45% 58%,#2e5260 58%)}.print-back.back-wild{background:repeating-conic-gradient(#db5c45 0 12deg,#f2bd43 12deg 24deg,#4d8f83 24deg 36deg,#5a4a7c 36deg 48deg)}.print-back.custom-back{background-color:#333}.print-back.back-noble:after{inset:5mm}}