*{box-sizing:border-box}
html{color-scheme:dark;background:#18161b}
body{margin:0;color:#f6f0f5;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}
button,input{font:inherit}
button,a,input,summary{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.42}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #e6b5ed;outline-offset:4px}
button,input{ -webkit-tap-highlight-color:transparent}
button{color:inherit}
a{color:inherit}
.app-shell{max-width:1072px;padding:0 32px 40px;margin:0 auto}
.app-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #353037}
.connection-pill{display:flex;align-items:center;gap:7px;font-size:12px;color:#c7bdc9;white-space:nowrap}
.status-dot{width:7px;height:7px;background:#827688;border-radius:50%;flex-shrink:0}
.is-connected .status-dot{background:#afe0aa;box-shadow:0 0 0 4px #afe0aa12}
.is-connected{color:#c9edc5}
.connect-panel{padding:28px 0;display:grid;grid-template-columns:1fr auto;gap:8px 24px;align-items:center}
.connect-panel p{color:#b7aaba;margin:0;font-size:13px;max-width:550px}
.connect-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.button{border:1px solid #4a3f4e;border-radius:10px;min-height:46px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:#2c2731;font-weight:620;font-size:13px;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.button:hover:not(:disabled){filter:brightness(1.09)}
.button:active:not(:disabled){transform:translateY(1px)}
.button-primary{background:#dea0e6;color:#241729;border-color:#dea0e6}
.button-quiet{background:transparent}
.button-outline{background:transparent;border-color:#766079;color:#edd8ef}
.button-small{min-height:37px;padding:8px 12px;font-size:12px}
.button-danger{background:#9c404d;color:#fff;border-color:#b25a66}
.text-button{background:none;border:none;padding:4px 0;font-size:12px;color:#d9acdF;text-decoration:underline;text-decoration-color:#715574;text-underline-offset:4px}
.notice{border:1px solid #5c4365;border-radius:10px;padding:12px 16px;margin:0 0 22px;background:#35273a;color:#f0dcf2;font-size:13px}
.notice[data-type=error]{border-color:#945760;background:#3f282d;color:#ffdae1}
.notice[data-type=success]{border-color:#47634d;background:#24352a;color:#d9f0d9}
.workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:34px;align-items:start}
.editor-panel,.saved-panel{min-width:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}
.section-heading h2{font-size:16px;letter-spacing:-.2px;margin:0;font-weight:650}
.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:650;color:#bdadc0}
.preview-frame{padding:14px 16px;position:relative;border:1px solid #66596b;border-radius:12px;background:linear-gradient(140deg,#3a343e,#241f2a 65%);box-shadow:0 12px 26px #0002,inset 0 0 0 4px #211d24}
.preview-frame canvas{display:block;width:100%;height:auto;background:#dea0e6;image-rendering:pixelated;border:3px solid #131015;border-radius:2px;aspect-ratio:320/170}
.screw{position:absolute;width:5px;height:5px;border-radius:50%;background:#a08d9f;box-shadow:inset -1px -1px 0 #423047}
.screw-tl{top:6px;left:6px}
.screw-tr{top:6px;right:6px}
.screw-bl{bottom:6px;left:6px}
.screw-br{bottom:6px;right:6px}
.preview-caption{display:flex;justify-content:center;align-items:center;margin:14px 0 22px}
.preview-button{min-width:120px;min-height:46px;font-size:14px}
.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#dea0e6;margin-right:5px}
.muted{color:#b5a6b9}
.field-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px}
.field-heading label,.colour-field>label,.face-field .field-label{font-size:12px;font-weight:600}
.field-heading .muted{font-size:11px}
#message-text{width:100%;border:1px solid #514455;border-radius:9px;background:#252029;color:#f8f2f8;font-size:18px;padding:13px 14px;min-height:52px;outline-offset:2px;margin-bottom:20px}
#message-text[aria-invalid=true]{border-color:#ed8795}
.display-options{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:22px;margin-bottom:20px}
.font-size-field{min-width:0}
.font-size-field output{font-size:11px;color:#b5a6b9;font-variant-numeric:tabular-nums}
.font-size-field input[type=range]{display:block;width:100%;height:44px;margin:0;accent-color:#dea0e6;cursor:pointer}
.scroll-option{display:flex;align-items:center;gap:9px;min-height:44px;font-size:12px;font-weight:600;cursor:pointer}
.scroll-option input{width:18px;height:18px;margin:0;accent-color:#dea0e6;cursor:pointer}
.action-help.overflow-help{margin:-8px 0 18px;color:#e1c79d}
.face-field{border:0;padding:0;margin:0 0 20px;min-width:0}
.face-field .field-label{display:block;margin-bottom:8px}
.face-picker-button{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;padding:9px 13px;border:1px solid #463b4b;border-radius:9px;background:#242028;font-size:13px;text-align:left}
.face-picker-button canvas{width:26px;height:26px;image-rendering:pixelated;flex-shrink:0}
.face-picker-button .muted{margin-left:auto;font-size:11px}
.face-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.face-option{position:relative;cursor:pointer}
.face-option input{position:absolute;opacity:0;width:100%;height:100%;margin:0}
.face-option>span{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:86px;padding:8px 4px;border:1px solid #463b4b;border-radius:8px;background:#242028;font-size:11px;color:#cbbdce;text-align:center}
.face-option canvas{width:39px;height:39px;image-rendering:pixelated}
.face-option input:checked+span{color:#f2d6f7;border-color:#b77fc1;background:#3b2941}
.face-option input:focus-visible+span{outline:3px solid #e6b5ed;outline-offset:3px}
.face-option input:disabled{cursor:not-allowed}
.face-option input:disabled+span{opacity:.4}
.colour-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.colour-field>label{display:block;margin-bottom:8px}
.colour-control{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #463b4b;border-radius:9px;background:#242028}
.colour-control input[type=color]{padding:0;border:0;min-width:31px;width:31px;height:30px;background:transparent;cursor:pointer;border-radius:5px}
.colour-control input::-webkit-color-swatch-wrapper{padding:0}
.colour-control input::-webkit-color-swatch{border:0;border-radius:5px}
.colour-control span{font-size:11px;letter-spacing:.4px;font-family:ui-monospace,Consolas,monospace;color:#d7cbd9}
.palette{display:flex;gap:5px;align-items:center;margin:14px 0 24px;flex-wrap:wrap}
.palette .muted{font-size:10px;flex-basis:100%;margin-bottom:3px}
.swatch{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;padding:0}
.swatch::before{content:"";width:24px;height:24px;box-sizing:border-box;border:2px solid #ffffff24;border-radius:50%;background:var(--swatch)}
.swatch:hover::before{border-color:#fff8}
.editor-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.editor-actions .button{justify-content:center;min-height:48px}
.action-help{margin:10px 0 0;font-size:11px;color:#b5a6b9;line-height:1.6}
.field-error{font-size:12px;color:#ffb6c1;margin:0 0 12px}
.count-badge{padding:3px 8px;background:#2d2531;border:1px solid #47394d;border-radius:6px;color:#baa8bf;font-family:ui-monospace,Consolas,monospace;font-size:10px}
.saved-empty{border:1px dashed #54445a;border-radius:12px;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px 28px;background:#211c251f}
.saved-empty p{font-size:12px;color:#a99aac;max-width:250px;margin:0;line-height:1.75}
.saved-list{display:grid;gap:12px}
.message-card{position:relative;border:1px solid #46394d;border-radius:11px;background:#242027;overflow:hidden}
.message-card.is-active{border-color:#9c6aa8}
.message-card.is-editing{outline:1px dashed #dea0e6;outline-offset:3px}
.message-card-main{display:flex;align-items:center;gap:14px;padding:14px}
.message-thumbnail{width:78px;height:42px;flex-shrink:0;border-radius:4px;image-rendering:pixelated;border:2px solid #100d13}
.message-info{min-width:0;flex:1}
.message-name{margin:0;color:#f0e5f1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-subtitle{font-size:10px;color:#af9eb5;margin:3px 0 0}
.message-card-actions{border-top:1px solid #382e3d;display:flex;gap:4px;padding:6px 9px;align-items:center}
.message-card-actions button{border:0;background:transparent;color:#d4bfd9;min-height:35px;padding:6px 10px;border-radius:6px;font-size:11px}
.message-card-actions button:hover:not(:disabled){background:#392a40}
.message-card-actions .message-remove{margin-left:auto;color:#bb9eaa}
.message-card-actions .message-show{color:#edc3f3}
.saved-footnote{font-size:11px;color:#a99aac;margin:15px 0}
.active-message{background:#2c2332;border-left:2px solid #d498de;padding:12px 14px;margin-bottom:15px;border-radius:0 8px 8px 0;display:grid;gap:4px}
.active-message strong{font-size:13px;overflow-wrap:anywhere}
.active-message .muted{font-size:10px}
.active-message .button{justify-self:start;margin-top:7px}
dialog{background:#28202d;color:#f6edf8;border:1px solid #715779;border-radius:14px;max-width:calc(100% - 36px);width:360px;padding:24px;box-shadow:0 20px 100px #0008}
dialog::backdrop{background:#09050cc9}
dialog h2{font-size:18px;margin:0 0 10px}
dialog p{font-size:13px;color:#c9b6cd;overflow-wrap:anywhere}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.face-dialog{width:480px;padding:20px;max-height:calc(100dvh - 32px);overflow:auto}
.face-dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.face-dialog-heading h2{margin:0}
[hidden]{display:none!important}
@media(max-width:720px){.app-shell{max-width:490px;padding:0 20px 32px}
.app-header{min-height:76px}
.connection-pill{font-size:10px}
.connect-panel{grid-template-columns:1fr;padding:24px 0;gap:15px}
.connect-panel p{font-size:12px;max-width:300px}
.connect-actions .button{width:100%;font-size:13px}
.connect-actions{width:100%}
.workspace{grid-template-columns:1fr;gap:34px}
.preview-frame{padding:12px 14px}
.saved-empty{min-height:120px;padding:24px}
.section-heading{margin-bottom:14px}
.colour-control{padding:8px}
.colour-control span{font-size:10px}
.editor-actions .button{font-size:12px;padding:12px}
.preview-caption{font-size:10px}
.eyebrow{font-size:8px}
}
@media(max-width:440px){.face-options{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}

.app-header h1{margin:0;font-size:20px;font-weight:650;letter-spacing:-.4px}