:root{--color-bg: #F1F5F9;--color-surface: #F8FAFC;--color-text: #1E293B;--color-text-secondary: #475569;--color-text-muted: #64748B;--color-text-subtle: #94A3B8;--color-border: #E2E8F0;--color-border-light: #CBD5E1;--color-primary: #005688;--color-primary-hover: color-mix(in hsl, var(--color-primary) 90%, white 10%);--color-primary-active: color-mix(in hsl, var(--color-primary) 90%, black 10%);--color-error: #B91C1C;--color-error-bg: #FEF2F2;--color-error-border: #FECACA;--color-success: #059669;--color-success-bg: #ECFDF5;--color-success-border: #6EE7B7;--color-success-text: #064E3B;--color-warning: #D97706;--color-warning-bg: #FFFBEB;--color-warning-border: #FCD34D;--color-warning-text: #92400E;--color-warning-text-body: #78350F}*,*:before,*:after{box-sizing:border-box;margin:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--color-bg);min-height:50vh;color:var(--color-text);overflow:hidden}.app{margin:0 auto;display:flex;flex-direction:column;gap:.25rem}.main-card{background:var(--color-primary);box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;display:grid;grid-template-columns:16rem 2fr 1fr;margin:0;gap:.25rem;height:calc(100vh - 4.5rem)}.main-card>*{max-height:calc(100vh - 4.5rem);overflow-y:auto;padding:1rem;background-color:#fff}.intro{max-width:40rem;margin:0 auto;color:var(--color-text-muted);font-size:1rem;line-height:1.6;padding:4rem 1rem;max-height:100vh;overflow-y:auto}.intro p{margin-bottom:1rem}.intro>div{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}.intro-step{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem}.intro-step-img{flex:0 0 auto;width:16rem;height:auto;border:1px solid var(--color-border);border-radius:.5rem;box-shadow:0 1px 3px #00000014}.intro-step-text h3{margin:0 0 .35rem;font-size:1rem;color:var(--color-text)}.intro-step-text p{margin:0}.card-header{background-color:#ddd;padding:1rem;color:#000}.card-header p{font-size:1.1rem;letter-spacing:-.02em;margin-bottom:1rem}.brush-selector{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.brush-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-subtle);margin-right:.25rem}.brush-btn{width:100%;display:flex;align-items:center;gap:.4375rem;padding:.4375rem .875rem;border:.25rem solid var(--brush-bg);border-radius:.5rem;cursor:pointer;font-size:.875rem;font-weight:500;background:#fff;color:var(--color-text-secondary);transition:border-color .12s,background .12s,color .12s;box-shadow:0 1px 2px #0000003d,0 2px 4px #00000029,0 3px 8px #00000014}.brush-btn:hover{box-shadow:0 1px 4px #0000003d,0 2px 8px #00000029,0 3px 16px #00000014}.brush-btn.active,.brush-btn:active{box-shadow:none}.brush-swatch{width:.75rem;height:.75rem;border-radius:.1875rem;flex-shrink:0}.brush-btn.active{border-color:var(--brush-bg);background:var(--brush-bg);color:var(--brush-color)}.paragraph-area{min-height:5rem}.paragraph-text{font-size:1rem;line-height:1.75;color:var(--color-text);user-select:none;-webkit-user-select:none;cursor:text;padding:1.125rem 1.25rem;border:1.5px solid var(--color-border);border-radius:.625rem;background:#fafbfc;padding:.5rem}.paragraph-text span{transition:background-color .05s;display:inline-text;padding:.25rem 0}.content-layout{display:grid;grid-template-columns:1fr 17rem;gap:1.5rem;align-items:start}.content-left{display:flex;flex-direction:column;gap:1.375rem;margin:0}.content-right{position:sticky;top:1.75rem;max-height:calc(100vh - 3.5rem);overflow-y:auto;margin:0}.labels-empty{color:var(--color-text-subtle);font-size:.8rem;padding:.75rem 0}.labels-list h3{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-subtle);margin-bottom:.625rem}.labels-list ul{list-style:none;display:flex;flex-direction:column;gap:.375rem;padding:0}.labels-list li{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem .625rem .5rem .875rem;border-radius:0 .5rem .5rem 0;background:var(--color-surface)}.label-type{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;border-radius:.7rem;padding:.25rem .5rem}.label-text{font-size:.875rem;color:var(--color-text-secondary);flex:1}.btn-remove{background:none;border:none;cursor:pointer;color:var(--color-border-light);font-size:1.2rem;line-height:1;padding:.125rem .375rem;border-radius:.25rem;transition:color .12s,background .12s}.btn-remove:hover{color:#ef4444;background:#fee2e2}.actions{position:fixed;bottom:0;left:0;right:0;padding:1rem;height:4.5rem;background-color:color-mix(in hsl,var(--color-primary) 60%,black 40%);box-shadow:0 1px 4px #00000014,0 4px 16px #0000000a;display:flex;justify-content:space-between;align-items:center;color:#fff}.actions a{color:var(--color-primary-hover);border-bottom:thin dotted var(--color-primary-hover);text-decoration:none}.actions .progress{display:flex;flex-direction:column}.actions .progress a{color:#fff;display:block;padding:.25rem 1.5rem;border-radius:.5rem;background-color:var(--color-primary);text-decoration:none}.actions .progress a.disabled{opacity:.6;color:#888;background-color:#00568880;border:none;pointer-events:none}.actions div{gap:.5rem;display:flex;align-items:center}.btn-submit{padding:.625rem 1.625rem;background:var(--color-primary);color:#fff;border:none;border-radius:.5rem;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .12s}.btn-submit:hover:not(:disabled){background:var(--color-primary-hover)}.btn-submit:active:not(:disabled){background:var(--color-primary-active)}.btn-submit:disabled{opacity:.45;cursor:not-allowed}.btn-skip{padding:.625rem 1.25rem;background:none;border:1.5px solid var(--color-border-light);border-radius:.5rem;font-size:.9375rem;font-weight:500;color:var(--color-text-muted);cursor:pointer;transition:background .12s,border-color .12s}.btn-skip:hover:not(:disabled){background:var(--color-bg);border-color:var(--color-text-subtle)}.btn-skip:disabled{opacity:.45;cursor:not-allowed}.loading{padding:2rem;text-align:center;color:var(--color-text-subtle);font-size:.9rem}.error-msg{padding:.875rem 1.125rem;background:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error);border-radius:.5rem;display:flex;align-items:center;gap:.875rem;font-size:.875rem}.error-msg button{padding:.3125rem .875rem;background:var(--color-error);color:#fff;border:none;border-radius:.375rem;cursor:pointer;font-size:.8rem;font-weight:600;white-space:nowrap}.completion-banner{background:var(--color-success-bg);border:1.5px solid var(--color-success-border);border-radius:.75rem;padding:1rem 1.375rem;display:flex;align-items:flex-start;gap:.875rem}.completion-icon{font-size:1.4rem;color:var(--color-success);flex-shrink:0;margin-top:.0625rem}.completion-body strong{display:block;color:var(--color-success-text);font-size:.95rem;margin-bottom:.3125rem}.completion-body a{color:var(--color-success);font-size:.875rem;word-break:break-all;text-decoration:underline}.no-user{max-width:40rem;margin:6rem auto;text-align:center;color:var(--color-text-muted);font-size:1rem;line-height:1.6}.no-user code{background:var(--color-bg);padding:.125rem .4375rem;border-radius:.25rem;font-family:ui-monospace,monospace;font-size:.9em}.no-user-warning{display:flex;gap:.875rem;align-items:flex-start;background:var(--color-warning-bg);border:1.5px solid var(--color-warning-border);border-radius:.75rem;padding:1.125rem 1.375rem;text-align:left}.no-user-warning-icon{font-size:1.4rem;color:var(--color-warning);flex-shrink:0;line-height:1.3}.no-user-warning strong{display:block;color:var(--color-warning-text);font-size:.95rem;margin-bottom:.375rem}.no-user-warning p{color:var(--color-warning-text-body);font-size:.875rem;line-height:1.55}.no-user-warning a{color:var(--color-warning);text-decoration:underline}