@font-face{font-family:Studio;src:local('Segoe UI')}*{box-sizing:border-box}body{margin:0;background:#f4f7fa;color:#172d42;font:14px Studio,Arial,sans-serif}button,input,textarea,select{font:inherit}button{border:1px solid #d9e2ea;border-radius:9px;background:white;color:#24455e;padding:10px 14px;cursor:pointer;transition:background .15s}button:hover{background:#eef6fc}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #0194e070;outline-offset:2px}.primary{background:#2061a3;border-color:#2061a3;color:white}.primary:hover{background:#184f89}.quiet{background:transparent;border-color:transparent}.wide{width:100%}.topbar{min-height:84px;background:white;border-bottom:1px solid #e1e8ee;display:flex;align-items:center;justify-content:space-between;padding:18px 26px;gap:20px;position:sticky;top:0;z-index:10}.brand{display:flex;gap:13px;align-items:center}.brand strong{display:block;font-size:19px;letter-spacing:-.4px}.brand small{display:block;color:#7890a2;font-size:11px;margin-top:4px}.monogram{font-size:27px;font-weight:900;color:white;background:linear-gradient(135deg,#0194e0,#2061a3);width:43px;height:43px;border-radius:12px;display:grid;place-items:center}.top-actions{display:flex;gap:9px;align-items:center}#save-status{font-size:12px;color:#678195;margin-right:10px}#notice{position:sticky;top:84px;z-index:11;background:#e8f5ff;color:#164f78;padding:12px 24px;display:none}#notice.error{background:#fff0eb;color:#a44328}main{display:grid;grid-template-columns:154px minmax(360px,1fr) 360px;max-width:1800px;margin:auto;min-height:calc(100vh - 84px)}[hidden]{display:none!important}nav{padding:28px 12px;border-right:1px solid #e1e8ee;background:#f9fbfc}nav button{border:0;background:transparent;width:100%;text-align:left;margin-bottom:10px;line-height:22px;padding:12px;font-size:13px}nav button span{display:block;font-size:23px;margin-bottom:5px;color:#7196b2}nav .selected{background:#e4f0fb;color:#175c97;font-weight:600}nav .selected span{color:#0194e0}.nav-note{font-size:11px;color:#8a9eac;line-height:1.8;padding:40px 12px}.canvas-area{padding:28px 36px 44px;min-width:0}.canvas-heading{display:flex;justify-content:space-between;align-items:center;max-width:640px;margin:0 auto 22px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:#7890a2}h2{font-size:22px;letter-spacing:-.6px;margin:9px 0 20px}h3{font-size:14px;margin:18px 0 12px}h3 small{font-weight:400;color:#8498a8}.canvas-heading h2{margin:5px 0 0}.pill{background:#e8edf2;border-radius:20px;padding:7px 11px;font-size:10px;color:#6b8192}.canvas-wrap{display:flex;justify-content:center;padding:10px 0}#canvas{position:relative;width:min(100%,560px);aspect-ratio:4/5;background:#edf1f5;box-shadow:0 15px 40px #233d5520;overflow:hidden;border-radius:3px;container-type:inline-size}#base{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#base:not([src]){display:none}#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6184a0;font-size:23px;font-weight:600;text-align:center}#empty small{font-size:12px;font-weight:400;margin-top:12px}#logo-object{position:absolute;padding:0;border:0;background:transparent;border-radius:8%;touch-action:none;cursor:grab;display:grid;place-items:center;overflow:visible;user-select:none;z-index:2}#logo-object::before{content:'';position:absolute;inset:-3%;border-radius:8%;background:linear-gradient(130deg,color-mix(in srgb,var(--primary) 43%,transparent) 45%,color-mix(in srgb,var(--secondary) 40%,transparent));backdrop-filter:blur(8px);z-index:-1}#logo-object:hover,#logo-object:focus{outline:1px solid #0194e0;outline-offset:4px}#logo-object img{width:100%;height:100%;object-fit:contain;pointer-events:none}#resize-handle{position:absolute;right:-7px;bottom:-7px;width:15px;height:15px;border:2px solid white;border-radius:4px;background:#0194e0;cursor:nwse-resize;box-shadow:0 0 0 1px #2061a3}.canvas-tip{font-size:11px;line-height:1.6;text-align:center;color:#8396a5;margin:17px auto 24px;max-width:450px}.caption-card{max-width:560px;margin:auto;background:white;border:1px solid #e1e8ee;border-radius:12px;padding:20px}#caption-preview{white-space:pre-wrap;line-height:1.6;font-size:14px;margin-top:12px;overflow-wrap:anywhere}aside{padding:30px 24px;background:white;border-left:1px solid #e1e8ee}aside h2{margin-bottom:22px}.muted,.hint{color:#7c91a1;line-height:1.6}.hint{font-size:11px}label{display:block;font-size:12px;color:#637b8e;margin:17px 0 8px}input:not([type=checkbox]),textarea{display:block;width:100%;margin-top:8px;border:1px solid #dbe4eb;border-radius:8px;background:#f9fbfd;color:#233e53;padding:11px 12px}textarea{resize:vertical;line-height:1.5}input[type=color]{height:42px;padding:5px;cursor:pointer}input[type=range]{padding:0;accent-color:#2061a3}output{float:right;color:#2061a3;font-weight:700}.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pair label{margin-top:8px}.row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.row button{flex:1;font-size:12px}.switch{display:flex;align-items:center;gap:9px;font-size:13px;margin:16px 0}.switch input{accent-color:#2061a3;width:17px;height:17px}hr{border:0;border-top:1px solid #edf1f5;margin:25px 0}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.profile-grid button{font-size:11px;padding:9px 5px;background:#f9fbfd}.profile-grid button.active{border-color:#0194e0;box-shadow:0 0 0 1px #0194e0;background:#eef8ff}.profile-icon{height:54px;background:linear-gradient(0deg,#2061a3 0%,#0194e025 75%);border-radius:4px;display:block;margin-bottom:7px;position:relative;overflow:hidden}.profile-icon::after{content:'';position:absolute;bottom:10px;left:10%;width:60%;height:4px;background:white;box-shadow:0 8px 0 #ffffff70}.profile-icon.p1{border-radius:50% 50% 4px 4px;background:#2061a3}.profile-icon.p2{transform:skew(-8deg);width:85%;margin-left:7%}.profile-icon.p3{background:linear-gradient(90deg,#2061a3 32%,#dcecf6 32%)}.profile-icon.p4{background:linear-gradient(0deg,#2061a3 30%,#dcecf6 30%,#dcecf6 72%,#2061a3 72%)}.profile-icon.p5{background:radial-gradient(ellipse at 25% 40%,#dcecf6 48%,#2061a3 49%)}.annotation{padding:10px 12px;border:1px solid #e3eaf0;border-radius:9px;margin-bottom:12px;background:#fcfdff}.annotation-top{display:flex;justify-content:space-between;align-items:center;color:#738c9e;font-size:11px}.annotation-top button{padding:3px 6px;background:transparent;border:0;font-size:17px;color:#8a9da9}.annotation textarea{margin-bottom:7px}.annotation .pair input{padding:7px}.format-bar{display:flex;gap:7px;margin-bottom:10px}.format-bar button{padding:8px 14px}#emoji-picker button{border:0;font-size:20px;padding:7px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#login{max-width:550px;margin:12vh auto;padding:32px}#login h1{font-size:44px;letter-spacing:-2px;line-height:1.1}#login p{line-height:1.8;color:#718898;margin:25px 0}dialog{border:0;border-radius:16px;max-width:410px;padding:28px;box-shadow:0 20px 80px #102a4840}dialog::backdrop{background:#102a4860}dialog p{line-height:1.6;color:#657d8e}@media(min-width:1500px){.canvas-area{padding-top:40px}#canvas{width:620px}}@media(max-width:1050px){main{grid-template-columns:105px minmax(270px,1fr) 320px}.canvas-area{padding:26px 20px}nav{padding:25px 6px}nav button{font-size:11px}aside{padding:25px 18px}.brand small{display:none}#save-status{display:none}}@media(max-width:760px){.topbar{padding:12px 14px;min-height:66px;gap:8px}.brand strong{font-size:15px}.monogram{width:33px;height:33px;font-size:22px}.top-actions{gap:4px}.top-actions button{padding:9px 10px;font-size:11px}#new{display:none}#notice{top:66px;padding:10px 14px;font-size:12px}main{display:flex;flex-direction:column}nav{display:flex;position:sticky;top:66px;z-index:8;padding:7px 8px;border:0;border-bottom:1px solid #e1e8ee;gap:3px}nav button{padding:8px 2px;margin:0;text-align:center;font-size:11px}nav button span{display:inline;font-size:15px;margin-right:5px}.nav-note{display:none}.canvas-area{padding:22px 18px 24px}.canvas-heading{margin-bottom:10px}.canvas-heading h2{font-size:18px}#canvas{max-width:380px}.canvas-tip{margin:14px 0}.caption-card{padding:16px}aside{border-top:1px solid #e1e8ee;border-left:0;padding:24px 20px 100px}.profile-grid{grid-template-columns:repeat(3,1fr)}#login{margin:7vh auto}#login h1{font-size:35px}}
