@font-face{font-family:Inter;src:url("tcgs-dbs-inter_n4.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("tcgs-dbs-inter_n7.woff2") format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:Barlow;src:url("tcgs-dbs-barlowcondensed_n7.woff2") format("woff2");font-weight:600 900;font-display:swap}
:root{--red:#d20616;--bright:#e30613;--ink:#111;--muted:#57595b;--line:#d9d9d9;--paper:#f4f4f4;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;color:var(--ink);font:14px Inter,Arial,Helvetica,sans-serif;background:var(--paper);color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #467aaf;outline-offset:3px}button{border:0;background:none}i[data-icon],.ico{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:none}svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}h1,h2,p{margin:0}button:disabled,input:disabled{cursor:not-allowed;opacity:.38}[hidden]{display:none!important}
.bar{height:66px;background:#1b1c1b;color:#fff}.bar-inner,main{max-width:1600px;margin:auto;padding:0 clamp(22px,3.65vw,58px)}.bar-inner{height:100%;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:8px}.brand img{width:36px;height:36px}.brand div{display:flex;flex-direction:column;align-items:flex-start}.brand small{font:800 8px/1.2 Inter,Arial,sans-serif;letter-spacing:.22em}.brand strong{font:italic 700 23px/.95 Barlow,Arial,sans-serif;letter-spacing:-1.35px}.nav-divider{width:1px;background:#464642;height:23px}.bar nav{display:flex;align-self:stretch;gap:23px}.nav-link{display:flex;gap:8px;align-items:center;padding:3px 0 0;color:#b8b9b5;border-bottom:3px solid transparent;font-weight:600;font-size:13px}.nav-link.current{color:white;border-bottom-color:var(--bright)}.nav-link:hover,.guide-btn:hover{color:white}.nav-link svg,.guide-btn svg{width:16px;height:16px}.guide-btn{margin-left:auto;display:flex;align-items:center;gap:8px;color:#d5d5d1;font-size:13px}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:33px 0 25px}.eyebrow,.micro{font:600 10px/1.3 var(--mono);letter-spacing:.12em}.eyebrow{color:var(--red);display:flex;align-items:center;gap:8px}.eyebrow b{width:19px;height:2px;background:var(--red);display:block}.intro h1{font:700 clamp(44px,4.5vw,69px)/.98 Barlow,"Arial Black",Arial,sans-serif;letter-spacing:-.058em;margin:8px 0 6px;transform:scaleX(.91);transform-origin:left}.intro h1 span{color:var(--red)}.intro p{font-size:14px;color:var(--muted);line-height:1.5}.actions{display:flex;gap:10px;padding-bottom:3px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:700;border:1px solid #c9c9c9;background:#fff;padding:0 16px;height:41px;border-radius:6px}.button:hover,.mini-btn:hover,.icon-button:hover,.rotation button:hover{background:#f1f1f1}.button.red{border-color:var(--red);background:var(--red);color:#fff}.button.red:hover{background:#ad0712}.button svg{width:16px;height:16px}.layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,24.2vw,356px);gap:23px;align-items:start}.card{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}.card-head{min-height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-bottom:1px solid var(--line);gap:10px}.card-head h2{display:flex;align-items:center;gap:9px;font:700 16px/1.2 Inter,Arial,Helvetica,sans-serif;letter-spacing:-.025em}.card-head h2 svg{width:18px;height:18px}.seg{display:flex;gap:2px;background:#f3f3f3;border:1px solid #dedede;border-radius:6px;padding:3px}.seg button{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 9px;font:600 11px/1.2 Inter,Arial,sans-serif;color:#6b6c66;border:1px solid transparent;border-radius:4px}.seg svg{width:14px;height:14px}.seg button.on{color:#20211e;background:white;border-color:#deded6;box-shadow:0 1px 2px #20202012}
.stage{background-color:#f1f1f1;background-image:radial-gradient(circle at 1px 1px,#cbcbcb .8px,transparent .94px);background-size:15px 15px;position:relative;isolation:isolate;padding:66px clamp(20px,2.45vw,46px) 50px;overflow:hidden}.stage-meta{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center}.stage-meta span{display:flex;align-items:center;gap:7px;font-size:9px;color:#5d5d5d;background:#f1f1f1}.micro b,.foot b{color:var(--red)}.stage-meta svg{width:12px;height:12px}.field{position:relative;margin:0 auto;width:100%}.panel-labels{position:absolute;bottom:100%;left:0;right:0;display:grid;grid-template-columns:714fr 627fr 707fr;height:21px;align-items:start}.panel-labels span{text-align:center;font:600 9px/1 var(--mono);letter-spacing:.11em;color:#5a5b55}.panel-labels em{font-style:normal;color:var(--red);margin:0 3px}.sheet{position:relative;background:#e7e6df;box-shadow:0 4px 10px #292c281f}#art{display:block;width:100%;height:auto;cursor:grab;touch-action:none}#art:active,#foldCanvas:active{cursor:grabbing}.marks{position:absolute;inset:-5px;pointer-events:none}.marks b{position:absolute;width:10px;height:10px;border:solid #797d72;border-width:1px 0 0 1px}.marks b:nth-child(2){right:0;transform:rotate(90deg)}.marks b:nth-child(3){bottom:0;right:0;transform:rotate(180deg)}.marks b:nth-child(4){bottom:0;transform:rotate(270deg)}.fold-overlay{position:absolute;inset:0;pointer-events:none}.fold-overlay b{position:absolute;top:0;bottom:0;left:34.86328125%;width:2px;background:repeating-linear-gradient(to bottom,#fff 0 6px,#3b3934 6px 11px);box-shadow:0 0 1px #333a}.fold-overlay b:nth-child(2){left:65.478515625%}.stage-hint{position:absolute;bottom:16px;align-items:center;display:flex;justify-content:center;gap:6px;left:0;right:0;color:#666961;font-size:11px}.stage-hint svg{width:13px;height:13px}.fold-view{height:clamp(210px,17vw,300px);margin:-12px 0}.fold-view canvas{height:100%;width:100%;cursor:grab;touch-action:none}.work-foot{display:flex;height:48px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:0 18px}.guide-switch,.history{display:flex;align-items:center;gap:8px}.guide-switch{padding:4px 0;font-size:12px;font-weight:600}.switch{display:inline-block;border-radius:40px;width:27px;height:15px;background:#c8c9c1;border:1px solid #abaea5;position:relative}.switch:after{content:'';position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:white}.guide-switch[aria-checked=true] .switch{background:var(--red);border-color:var(--red)}.guide-switch[aria-checked=true] .switch:after{left:14px}.history{gap:5px}.history button,.icon-button{height:29px;width:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px}.history svg,.icon-button svg{width:15px;height:15px}
.customize{grid-column:2;grid-row:1/span 2}.tool-tabs{display:flex;border-bottom:1px solid var(--line);padding:0 17px;gap:10px}.tool-tabs button{flex:1;display:flex;gap:6px;align-items:center;justify-content:center;font-weight:700;color:var(--muted);font-size:12px;height:43px;border-bottom:2px solid transparent;padding:2px 0 0}.tool-tabs svg{width:15px;height:15px}.tool-tabs button.active{color:var(--red);border-color:var(--red)}.tools{padding:18px 19px 17px}.label{display:block;margin:0 0 7px;font:600 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:#555650}.select-wrap{position:relative}.select-wrap>i{position:absolute;left:11px;top:11px;pointer-events:none}.select-wrap>i:last-child{right:10px;left:auto}.select-wrap svg{height:15px;width:15px}.select-wrap select{appearance:none;padding:0 30px 0 35px}select,input[type=text]{color:var(--ink);padding:0 10px;background:#fff;border:1px solid #d5d5cf;border-radius:5px;height:36px;width:100%;font-size:13px}select{cursor:pointer}.drop{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:15px;padding:16px 8px;background:#fafafa;border:1px dashed #aaa99c;border-radius:5px;text-align:left;transition:background .15s}.drop:hover,.drop.dragging{background:#fff0f1;border-color:var(--red)}.upload-icon{width:34px;height:34px;border:1px solid var(--line);border-radius:6px;background:white;display:grid;place-items:center}.upload-icon svg{width:18px;height:18px}.drop strong,.drop small{display:block}.drop strong{font-size:13px}.drop small{font-size:10px;color:var(--muted);margin-top:3px}.hidden-file{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.hr{height:1px;background:#e3e3e3;margin:18px 0}.control-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.control-head .label{margin:0}output{font:600 11px/1.4 var(--mono)}.control-head output{background:#f3f3f3;padding:2px 6px;border-radius:3px}.tools input[type=range]{appearance:none;width:100%;height:4px;margin:7px 0 16px;border-radius:5px;background:linear-gradient(to right,var(--red) var(--fill,27%),#ddded7 var(--fill,27%));display:block}.tools input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--red);border:2px solid #fff;box-shadow:0 0 0 1px var(--red)}.tools input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--red);border:2px solid white;border-radius:50%}.transform-row,.two{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:7px}.rotation,.mini-btn{display:flex;border:1px solid var(--line);border-radius:5px;align-items:center;height:33px;background:white}.rotation{justify-content:space-between}.rotation button{height:30px;width:30px;display:grid;place-items:center}.rotation svg,.mini-btn svg{width:14px;height:14px}.mini-btn{justify-content:center;gap:7px;width:100%;font-size:12px}.clear-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#65665e;margin:14px 0 0;padding:2px 0}.clear-btn:hover{color:var(--red)}.clear-btn svg{width:13px;height:13px}.spaced,.two,.two+.control-head{margin-top:15px}.tool-note{font-size:12px;line-height:1.5;color:var(--muted);margin:14px 0 0}input[type=color]{height:36px;width:100%;border:1px solid var(--line);border-radius:5px;background:white;padding:4px;cursor:pointer}.color-line{display:flex;align-items:center;gap:8px}.color-line input{width:55px}.swatches{display:flex;gap:7px;margin:17px 0}.swatches button{width:25px;height:25px;border-radius:50%;border:1px solid #aaa}
.library{grid-row:2;grid-column:1}.lib-head{display:flex;align-items:center;justify-content:space-between}.lib-head .micro{font-size:9px;color:var(--muted)}.library h2{font:700 27px/1.15 Barlow,Arial,sans-serif;letter-spacing:-.045em;margin:5px 0 12px}.presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.preset{background:#fff;border:1px solid var(--line);border-radius:7px;padding:0;overflow:hidden;text-align:left;position:relative;min-width:0}.preset:hover{border-color:#777}.preset.selected{border:2px solid var(--red)}.preset img{width:100%;height:clamp(65px,6vw,110px);object-fit:cover;display:block}.preset.selected img{height:calc(clamp(65px,6vw,110px) - 1px)}.preset .caption{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;gap:5px}.preset.selected .caption{padding:10px 10px 9px}.preset .caption strong{font-size:13px}.preset .caption small{font:600 9px var(--mono);color:#75756e}.stamp{position:absolute;right:7px;top:7px;background:var(--red);border:1px solid white;border-radius:50%;width:20px;height:20px;align-items:center;justify-content:center;display:none;color:white}.stamp svg{width:13px;height:13px;stroke-width:2.4}.selected .stamp{display:flex}.foot{margin-top:30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:16px 0 20px;color:#72746c}.foot span{display:flex;align-items:center;gap:7px;font:600 9px var(--mono);letter-spacing:.1em}.foot img{width:15px;height:15px;filter:grayscale(1);opacity:.7}
dialog{color:var(--ink);border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:23px;max-width:min(500px,94vw);width:500px;max-height:84dvh;box-shadow:0 23px 100px #0003}dialog::backdrop{background:#1a1c1a80}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.modal-head h2{font:700 30px Barlow,Arial,sans-serif;letter-spacing:-.04em;margin-top:5px}.modal-copy{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:13px}.modal-preview{width:100%;display:block;border:1px solid var(--line);border-radius:4px;margin:0 0 16px}.modal-action{display:flex;justify-content:flex-end;margin-top:16px}.guide-list{list-style:none;padding:0;margin:0}.guide-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);line-height:1.45}.guide-list b{font:700 12px var(--mono);color:var(--red);padding-top:3px}.guide-list strong{display:block;margin-bottom:2px}.guide-list span{font-size:13px}.saved-list{display:grid;gap:9px}.saved-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;padding:7px;background:white;text-align:left}.saved-item img{width:92px;height:41px;object-fit:cover;border-radius:3px}.saved-item strong{overflow-wrap:anywhere}.saved-item small{display:block;color:var(--muted);margin-top:3px}.confirm-line{font-size:12px;color:var(--muted);margin-top:10px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(14px);background:#222420;color:white;border:1px solid #45483f;padding:11px 18px;border-radius:6px;opacity:0;pointer-events:none;z-index:8;font-size:13px;text-align:center;transition:.2s;width:max-content;max-width:90vw}#toast.show{opacity:1;transform:translateX(-50%)}
@media(min-width:1650px){.stage{padding-top:78px;padding-bottom:58px}}
@media(max-width:900px){.bar-inner,main{padding-left:20px;padding-right:20px}.layout{gap:15px;grid-template-columns:minmax(0,1fr) 266px}.seg button{padding:6px}.card-head{padding:0 13px}.workspace .card-head{flex-wrap:wrap;padding-block:10px}.stage{padding-inline:20px}.tools{padding:16px}.intro{padding-top:25px}.bar-inner{gap:18px}.tool-tabs{padding:0 10px}.preset .caption{padding:8px}.preset .caption strong{font-size:12px}}
@media(max-width:700px){.bar{height:57px}.bar-inner,main{padding-inline:15px}.brand img{width:28px;height:28px}.brand strong{font-size:18px}.brand small{font-size:7px}.bar-inner{gap:14px}.nav-divider{display:none}.bar nav{gap:13px}.nav-link{font-size:11px;gap:4px}.nav-link svg{display:none}.guide-btn{padding:5px}.guide-btn span{display:none}.intro{display:block;padding:23px 0 17px}.intro h1{font-size:46px}.intro p{font-size:13px}.actions{margin-top:16px;padding:0}.actions .button{height:36px}.layout{display:flex;flex-direction:column;gap:16px}.layout>*{width:100%}.workspace .card-head{padding:10px 12px;min-height:48px;gap:5px}.card-head h2{font-size:14px;gap:6px}.card-head h2 svg{width:16px;height:16px}.seg button{font-size:10px;gap:4px}.seg svg{width:13px;height:13px}.stage{padding:55px 16px 41px}.stage-meta{top:12px;left:12px;right:12px}.stage-meta span{font-size:8px}.panel-labels span{font-size:8px}.stage-hint{bottom:12px;font-size:10px}.customize .card-head{min-height:43px}.tools{padding:15px}.library{order:3}.presets{gap:7px}.preset img{height:53px}.preset.selected img{height:52px}.preset .caption,.preset.selected .caption{padding:7px 5px}.preset .caption small{display:none}.preset .caption strong{font-size:11px}.presets .stamp{width:16px;height:16px;right:4px;top:4px}.work-foot{height:39px;padding:0 12px}.foot{margin-top:22px}.foot span{font-size:7px}.fold-view{height:160px}.drop{margin-top:10px}.hr{margin:14px 0}.library h2{font-size:25px}}
@media(max-width:370px){.brand div small{display:none}.nav-link{font-size:10px}.bar-inner{gap:9px}.bar nav{gap:9px}.seg button{padding:5px 4px}.seg svg{display:none}.stage-meta span{font-size:7px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
a.button{text-decoration:none}.button:focus-visible{outline:3px solid #467aaf;outline-offset:3px}
