@keyframes flashOutline{0%{box-shadow:0 0 #007bf099}to{box-shadow:0 0 0 10px #0000}}: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 #0000008c;--shadow-inset:inset 0 1px 0 #ffffff0a;--shadow-card:0 20px 60px #00000073;--shadow-panel:0 12px 32px #00000061;--panel-heading-gap:18px}*{box-sizing:border-box}.thumb img,body,html{height:100%}.tiny,body{color:var(--text)}body{background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;line-height:1.4}h1{margin:0 0 8px;font-size:clamp(20px,4vw,30px)}h2{text-align:center;margin:20px;font-size:1.5rem}.panel h3{margin:0 0 var(--panel-heading-gap)}.tiny{opacity:.92;font-size:.95rem;line-height:1.7}.wrap{width:100%;max-width:none;margin:0 auto;padding-block:18px;padding-inline:clamp(12px,4vw,48px)}.card{background:var(--card-grad);border-radius:var(--radius-lg);box-shadow:var(--shadow-card), var(--shadow-inset);border:0;width:100%;padding:18px;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{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,.9fr);gap:18px;padding:18px;display:grid}@media (width<=1200px){.grid{grid-template-columns:1fr;gap:14px;padding:12px}}.upload{gap:var(--gap);border:2px dashed var(--hover);background:var(--surface-grad);border-radius:14px;flex-wrap:wrap;justify-content:space-between;padding:22px;transition:box-shadow .15s;position:relative;box-shadow:0 10px 28px #00000059}.upload.dragover{border-color:var(--hover);box-shadow:inset 0 0 0 3px #007bf040,0 10px 28px #007bf026}.upload,.upload .left{align-items:center;display:flex}.upload .left{gap:16px;min-width:0}.thumb{aspect-ratio:16/9;width:clamp(96px,16vw,260px);box-shadow:inset 0 1px 0 #ffffff08, var(--shadow-sm);background:#2f2f2f;border-radius:12px;flex:none;place-items:center;display:grid;overflow:hidden}.thumb img{object-fit:cover;width:100%;display:block}.foot,.row,.upload .actions{flex-wrap:wrap;gap:8px;display:flex}.foot{margin-top:10px}.upload .actions{align-items:center}.ghost,.primary,button{background-color:var(--color-four);background-image:linear-gradient(#ffffff2e 0%,#ffffff0f 42%,#fff0 100%)}.ghost,button{color:var(--text);cursor:pointer;border:1px solid #7ec5ff94;border-radius:999px;min-height:48px;padding:10px 14px;font-weight:700;transition:transform .2s,box-shadow .2s,background-color .3s,border-color .3s;box-shadow:0 10px 22px #00000047,inset 0 1px #ffffff2e,inset 0 -1px #00000038}.ghost:active,button:active{transform:translateY(1px)}.ghost:hover,.primary:hover,button:hover{background-color:var(--color-three);border-color:#bce3ffeb;box-shadow:0 14px 28px #00000057,0 0 0 1px #007bf024,inset 0 1px #ffffff38}.primary{margin-left:5px}.palette{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;display:grid}.swatch{background:#2f2f2f;border-radius:12px;overflow:hidden;box-shadow:inset 0 1px #ffffff08,0 1px #0009}.swatch .chip{height:84px}.swatch .meta{color:var(--muted);padding:10px;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Courier New,monospace}.role-row{align-items:center;gap:12px;padding:10px 12px;display:flex}.grad-pill,.role-row .chip-role{border:1px solid #cccccc38}.role-row .chip-role{border-radius:10px;flex:none;width:44px;height:44px}.grad-pill{cursor:pointer;background:linear-gradient(#3b3b3b,#343434);align-items:center;gap:8px;min-height:44px;margin:auto;padding:6px 10px;display:inline-flex;box-shadow:inset 0 1px #ffffff0d,0 2px #00000080,0 10px 22px #0000004d}.badge,.grad-chip,.grad-pill{border-radius:999px}.grad-chip{vertical-align:middle;pointer-events:none;width:14px;height:14px;display:inline-block;box-shadow:inset 0 0 0 1px #cccccc38}.grad-pill .label{white-space:nowrap}.grad-pill.flash{animation:.62s ease-out flashOutline}.badge{background:0 0;border:1px solid #cccccc38;align-items:center;gap:6px;padding:2px 8px;font-size:11px;display:inline-flex}.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{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (width<=820px){.two{grid-template-columns:1fr}}.ghost:focus-visible,.grad-pill:focus-visible,.upload:focus-visible,button:focus-visible{outline-offset:2px;outline:2px solid #ffffffe0;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{z-index:auto;width:100%;position:static}@media (width<=520px){.upload{flex-direction:column;align-items:stretch;gap:12px;padding:16px}.upload .left{align-items:center;gap:12px;width:100%;min-width:0}.thumb{aspect-ratio:4/3;width:96px;height:auto}.upload .actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;width:100%}.upload .actions .primary{white-space:nowrap;z-index:2;align-self:center;min-width:120px;max-width:100%}.upload .actions .ghost,.upload .actions button{flex:none}}