@keyframes flashOutline{0%{box-shadow:0 0 #007bf099}to{box-shadow:0 0 0 10px transparent}}:root{--bg: #2a2a2a;--panel: #3a3a3a;--panel-2: #363636;--card-grad: linear-gradient(180deg, #3c3c3c, #373737);--surface-grad: linear-gradient(180deg, var(--panel), var(--panel-2));--btn-grad: linear-gradient(180deg, #404040, #353535);--text: #f2f2f2;--muted: #e0e0e0;--hover: #007bf0;--radius: 14px;--radius-lg: 16px;--gap: 12px;--shadow-sm: 0 1px 0 rgba(0, 0, 0, .55);--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04);--shadow-card: 0 20px 60px rgba(0, 0, 0, .45);--shadow-panel: 0 12px 32px rgba(0, 0, 0, .38);--panel-heading-gap: 18px}*{box-sizing:border-box}.thumb img,body,html{height:100%}.tiny,body{color:var(--text)}body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;line-height:1.4}h1{font-size:clamp(20px,4vw,30px);margin:0 0 8px}h2{font-size:1.5rem;text-align:center;margin:20px}.panel h3{margin:0 0 var(--panel-heading-gap)}.tiny{font-size:.95rem;opacity:.92;line-height:1.7}.wrap{width:100%;max-width:none;padding-inline:clamp(12px,4vw,48px);padding-block:18px;margin:0 auto}.card{background:var(--card-grad);border-radius:var(--radius-lg);border:0;box-shadow:var(--shadow-card),var(--shadow-inset);padding:18px;width:100%;overflow:auto}.block,.panel{padding:16px}.block,.panel,.role-row{background:var(--surface-grad);border-radius:var(--radius);box-shadow:var(--shadow-panel),var(--shadow-inset);border:0}.grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.9fr);gap:18px;padding:18px}@media (max-width: 1200px){.grid{grid-template-columns:1fr;padding:12px;gap:14px}}.upload{gap:var(--gap);justify-content:space-between;padding:22px;border:2px dashed var(--hover);border-radius:14px;background:var(--surface-grad);position:relative;box-shadow:0 10px 28px #00000059;transition:box-shadow .15s ease;flex-wrap:wrap}.upload.dragover{border-color:var(--hover);box-shadow:inset 0 0 0 3px #007bf040,0 10px 28px #007bf026}.upload,.upload .left{display:flex;align-items:center}.upload .left{gap:16px;min-width:0}.thumb{width:clamp(96px,16vw,260px);aspect-ratio:16/9;border-radius:12px;background:#2f2f2f;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px #ffffff08,var(--shadow-sm);flex:0 0 auto}.thumb img{display:block;width:100%;object-fit:cover}.foot,.row,.upload .actions{display:flex;gap:8px;flex-wrap:wrap}.foot{margin-top:10px}.upload .actions{align-items:center}.ghost,.primary,button{background:var(--btn-grad)}.ghost,button{border:0;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600;min-height:44px;transition:transform .08s ease,box-shadow .15s ease,background-color .15s ease;box-shadow:inset 1px 1px #ffffff1a,inset -1px -1px #0000004d,0 2px 4px #0003}.ghost:active,button:active{transform:translateY(1px)}.ghost:hover,.primary:hover,button:hover{background:var(--hover);box-shadow:inset 0 .5px #ffffff14,0 1px #00000073,0 3px 6px #007bf01f}.primary{margin-left:5px}.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.swatch{border-radius:12px;background:#2f2f2f;overflow:hidden;box-shadow:inset 0 1px #ffffff08,0 1px #0009}.swatch .chip{height:84px}.swatch .meta{padding:10px;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Courier New,monospace;color:var(--muted)}.role-row{display:flex;align-items:center;gap:12px;padding:10px 12px}.grad-pill,.role-row .chip-role{border:1px solid rgba(204,204,204,.22)}.role-row .chip-role{width:44px;height:44px;border-radius:10px;flex:0 0 auto}.grad-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;min-height:44px;background:linear-gradient(180deg,#3b3b3b,#343434);box-shadow:inset 0 1px #ffffff0d,0 2px #00000080,0 10px 22px #0000004d;cursor:pointer;margin:auto}.badge,.grad-chip,.grad-pill{border-radius:999px}.grad-chip{width:14px;height:14px;display:inline-block;vertical-align:middle;box-shadow:0 0 0 1px #cccccc38 inset;pointer-events:none}.grad-pill .label{white-space:nowrap}.grad-pill.flash{animation:flashOutline .62s ease-out}.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;font-size:11px;border:1px solid rgba(204,204,204,.22);background:0 0}.mt8{margin-top:8px}.mt12{margin-top:12px}.center{text-align:center}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Courier New,monospace}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 820px){.two{grid-template-columns:1fr}}.ghost:focus-visible,.grad-pill:focus-visible,.upload:focus-visible,button:focus-visible{outline:3px solid var(--hover);outline-offset:2px;box-shadow:0 0 0 3px #007bf040}.grid>*,.left,.mono,.panel,.role-row,.row,.thumb,button,input,label{min-width:0}.mono,button,input,label{word-break:break-word}.site-footer,footer{position:static;width:100%;z-index:auto}@media (max-width: 520px){.upload{flex-direction:column;align-items:stretch;padding:16px;gap:12px}.upload .left{width:100%;gap:12px;align-items:center;min-width:0}.thumb{width:96px;height:auto;aspect-ratio:4/3}.upload .actions{justify-content:flex-end;width:100%;gap:8px;flex-wrap:wrap}.upload .actions .primary{min-width:120px;max-width:100%;white-space:nowrap;align-self:center;z-index:2}.upload .actions .ghost,.upload .actions button{flex:0 0 auto}}