/* Appearance settings and the personal display selector share these swatches. */
.brandbar nav button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:0;background:transparent;color:var(--muted);font-size:.85rem;font-weight:600}
.brandbar nav button:hover{background:white}
.theme-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(146px,100%),1fr));gap:9px;margin:12px 0}
.theme-option{display:grid;grid-template-rows:32px auto 1fr;gap:4px;text-align:left;align-items:start;justify-content:stretch;background:white;padding:8px;font-size:.86rem}
.theme-option small{display:block;font-size:.72rem;font-weight:450;color:#52616c}.theme-option[aria-pressed=true],.avatar-options [aria-pressed=true]{outline:2px solid #24718a;outline-offset:-2px;background:#eef7f8}
.theme-swatch{display:flex;gap:5px;align-items:center;padding:7px;border-radius:5px;background:linear-gradient(115deg,#d4e2e8,#eef4f5)}
.theme-swatch i{display:block;width:23px;height:16px;border-radius:4px;background:#ffffffe0;border:1px solid #aabac5}.theme-swatch i:last-child{width:15px;height:8px;margin-left:auto;background:#23574b}
.theme-swatch[data-skin=arcade]{background:linear-gradient(120deg,#3742d5,#a2c4ff)}.theme-swatch[data-skin=arcade] i{border:2px solid #222;box-shadow:1px 2px #222}.theme-swatch[data-skin=arcade] i:last-child{background:#ffd43b}
.theme-swatch[data-skin=festival]{background:repeating-conic-gradient(at 50% 120%,#d7f16d 0 11deg,#b2db67 11deg 22deg)}.theme-swatch[data-skin=festival] i{border:2px solid #252720}.theme-swatch[data-skin=festival] i:last-child{background:#ff7294}
.theme-swatch[data-skin=paper]{background:repeating-linear-gradient(#f8eace 0 7px,#ddc7a5 8px)}.theme-swatch[data-skin=paper] i:last-child{background:#a24f38}
.theme-swatch[data-skin=orbit]{background:radial-gradient(circle at 68% 30%,#d2cafa 1px,transparent 2px),linear-gradient(120deg,#272346,#676198)}.theme-swatch[data-skin=orbit] i:last-child{background:#c8b6ff}
.theme-swatch[data-skin=coast]{background:repeating-linear-gradient(-48deg,#cce6e1 0 8px,#e8f4ec 8px 16px)}.theme-swatch[data-skin=coast] i:last-child{background:#18737a}
.avatar-options{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.agent-avatar{overflow:hidden;flex-shrink:0}.agent-avatar img{width:100%;height:100%;object-fit:contain}.agent-sample{display:flex;align-items:center;gap:12px;background:var(--wash);border-radius:12px;padding:12px;margin-top:14px}.agent-sample .avatar{width:42px;height:42px}.agent-sample p{margin:2px 0 0}.agent-sample strong,.message-body small{overflow-wrap:anywhere}
:root[data-theme=arcade]{--glass:#f2f5ff;--tint:#dce5ff;--wash:#fff4c2;--hair:#25223c63;--muted:#454761}
:root[data-theme=festival]{--glass:#ffffed;--tint:#def3a1;--wash:#fff4c9;--hair:#48612564;--muted:#435932}
:root[data-theme=paper]{--glass:#fffaf0;--tint:#efdcc4;--wash:#f8edda;--hair:#93734850;--muted:#6f5c4c}
:root[data-theme=orbit]{--glass:#f4f2fb;--tint:#e2dcf6;--wash:#edeaf8;--hair:#76689460;--muted:#56516e}
:root[data-theme=coast]{--glass:#fffdf4;--tint:#d4eee9;--wash:#edf5e9;--hair:#548b8b60;--muted:#3d6265}
[data-theme=arcade] body{background:linear-gradient(166deg,#353ae0,#566eee 39%,#b8d2f6 74%,#eaf7f2) fixed}
[data-theme=festival] body{background:repeating-conic-gradient(from 0deg at 50% 120%,#c5ea66 0 9deg,#dbf298 9deg 18deg) fixed}
:is([data-theme=arcade],[data-theme=festival]) :is(.studio-panel,.panel,.modal,.rooms){border:2px solid #242438;box-shadow:3px 4px 0 #242438;border-radius:15px}
:is([data-theme=arcade],[data-theme=festival]) .brandbar{background:#fffdf2;border-bottom:3px solid #232334}
:is([data-theme=arcade],[data-theme=festival]) :is(.new-chat,.send-btn,.gate .accent,.gate .yellow,.version-list button[aria-pressed=true]){border:2px solid #222438;box-shadow:2px 2px #222438}
[data-theme=arcade] :is(.gate-banner,.pane-head){background-color:#e6ebff;background-image:linear-gradient(90deg,#acb7ed44 1px,transparent 1px),linear-gradient(#acb7ed44 1px,transparent 1px);background-size:13px 13px}
[data-theme=arcade] .new-chat{background:#ffd43b;color:#272616}
[data-theme=festival] :is(.gate-banner,.pane-head){background-color:#f1f8cb;background-image:var(--flags);background-repeat:repeat-x;background-size:112px 9px;background-position:top}
[data-theme=festival]{--flags:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='9'%3E%3Cpath d='M0 0h15l-7 8z' fill='%23ffd43b'/%3E%3Cpath d='M28 0h15l-7 8z' fill='%23ff5b7f'/%3E%3Cpath d='M56 0h15l-7 8z' fill='%2374a8ff'/%3E%3Cpath d='M84 0h15l-7 8z' fill='%23b197fc'/%3E%3C/svg%3E")}
[data-theme=festival] .new-chat{background:#ffde7c;color:#283020}
[data-theme=paper] body{background-color:#eee1c9;background-image:linear-gradient(90deg,#957b4526 1px,transparent 1px),linear-gradient(#957b4526 1px,transparent 1px);background-size:19px 19px}
[data-theme=paper] :is(.studio-panel,.panel){border:1px solid #b39a75;border-radius:6px;box-shadow:3px 4px 0 #b0987550}
[data-theme=paper] :is(.pane-head,.brandbar,.gate-banner){background:#f2e5cc}[data-theme=paper] :is(.gate h1,.pane-title h1,.pane-title h2){font-family:Georgia,'Batang',serif}
[data-theme=orbit] body{background:radial-gradient(circle at 12px 19px,#f6dca87a 1px,transparent 1.5px) 0 0/47px 53px,radial-gradient(ellipse at 30% 0,#514e84,#272641 65%,#19192d) fixed}
[data-theme=orbit] :is(.brandbar,.pane-head,.gate-banner){background:#35304f;color:#faf6ff}[data-theme=orbit] :is(.brandbar nav a,.brandbar nav button,.pane-head small){color:#ece7ff}[data-theme=orbit] .brandbar nav :is(a[aria-current=page],a:hover,button:hover){background:#56506d;color:#fff}
[data-theme=coast] body{background:repeating-linear-gradient(-45deg,#d9ebe5 0 14px,#e8f3eb 14px 28px) fixed}
[data-theme=coast] :is(.studio-panel,.panel){border:1px solid #81a9a9;box-shadow:0 5px 20px #216a6a20}[data-theme=coast] :is(.gate-banner,.pane-head){background:#e1f1e9;border-top:4px solid transparent;border-image:repeating-linear-gradient(115deg,#287981 0 11px,#f9eddb 11px 21px,#e3a38b 21px 31px,#f9eddb 31px 42px) 1}
:root:not([data-theme=glass]) .canvas:has(.empty-canvas){background:linear-gradient(150deg,#fff,var(--wash))}
.reference-page{width:min(1040px,100%);margin:clamp(14px,4vh,40px) auto;padding:0 14px 24px}
.ref-library{padding:clamp(16px,3vw,32px);color:var(--ink)}.library-dialog{width:min(880px,95vw);max-height:90dvh;overflow:auto}
.ref-head,.ref-trail{display:flex;align-items:center;justify-content:space-between;gap:12px}.ref-head small{display:block;font:700 .71rem/1.6 system-ui;letter-spacing:.15em;color:var(--muted)}.ref-head :is(h1,h2){margin:3px 0;font-size:clamp(1.4rem,3vw,2rem)}.ref-intro,.ref-trail span{color:var(--muted);font-size:.91rem}.ref-intro{margin:9px 0 16px}.ref-trail{margin:12px 0}.ref-filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.ref-filters button{border-radius:20px}.ref-filters [aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.ref-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(185px,100%),1fr))}.ref-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:left;gap:5px;padding:8px 8px 12px;background:#fff;border-radius:12px}.ref-art{position:relative;display:flex;align-items:center;justify-content:space-between;height:66px;padding:12px 16px;border-radius:7px;color:#fff;background-color:var(--ref-color);isolation:isolate;overflow:hidden}.ref-art:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(115deg,transparent 0 13px,#fff2 13px 14px)}.ref-art[data-kind=창작]:before{background:repeating-conic-gradient(#fff2 0 25%,transparent 0 50%) 0 0/24px 24px}.ref-art[data-kind=놀이]:before{background:radial-gradient(#fff5 1px,transparent 1.4px) 0 0/11px 11px}.ref-art[data-kind=학습]:before{background:repeating-radial-gradient(circle at 85% 75%,transparent 0 11px,#fff3 12px 13px)}
.ref-art i{font:600 .74rem system-ui}.ref-art b{font:600 2rem Georgia,serif}.ref-meta,.ref-blurb,.ref-card>strong{margin-inline:5px}.ref-meta{margin-top:4px;color:var(--muted);font-size:.72rem}.ref-card>strong{font-size:.97rem}.ref-blurb{font-size:.79rem;line-height:1.45;color:var(--muted);font-weight:400;word-break:keep-all}
.ref-demo iframe{display:block;width:100%;height:clamp(345px,54vh,530px);border:1px solid var(--hair);border-radius:12px;background:white}.ref-brief{margin-top:12px;padding:13px;background:var(--wash);border-radius:11px}.ref-brief p{margin:3px 0 10px}.ref-brief [role=status]{font-size:.78rem}
@media(max-width:760px){.brandbar nav button{min-height:30px;font-size:.78rem;padding:6px}.ref-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.ref-art{padding:6px 9px;height:44px}.ref-art b{font-size:1.4rem}.ref-demo iframe{height:clamp(320px,53dvh,480px)}.ref-library{padding:15px}}
@media(max-width:570px){.brandbar nav .icon{display:inline-block;width:17px;height:17px}.brandbar nav :is(a,button){min-height:34px;min-width:32px;padding:5px}.brandbar nav :is(a,button)>span{display:none}.brandbar nav a[data-library]>span{display:inline}.ref-blurb{font-size:.75rem}.ref-card{padding:5px 5px 9px}.theme-option{min-width:0}}