:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#20243a;background:#f6f7fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #8783ff;outline-offset:2px}.app{min-height:100dvh}header{height:76px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;background:#fff;border-bottom:1px solid #e5e7ef}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#5551ff;color:#fff;font-size:23px}.brand h1{font-size:19px;letter-spacing:-.04em;margin:0}main:not(.viewer-main){max-width:1440px;margin:auto;padding:32px clamp(20px,4vw,64px)}.welcome{max-width:540px;margin:15vh auto;text-align:center}.welcome-mark{font-size:74px;color:#5551ff;line-height:1}.welcome h2{font-size:clamp(28px,4vw,42px);line-height:1.15;letter-spacing:-.045em;margin:28px 0 14px}.welcome p{color:#6a7084;line-height:1.6}.primary{background:#5551ff;border:0;color:#fff;padding:15px 24px;border-radius:11px;font-weight:700;margin-top:22px}.primary:disabled{opacity:.6}.viewer-main{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#eef0f5}.canvas-viewport{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain}.canvas-content{position:relative;margin:0 auto;flex:none;background:#fff}.canvas-content img{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}.canvas-content .preview-patch{position:absolute;z-index:1;object-fit:fill;pointer-events:none}.hotspot{position:absolute;border:0;background:transparent;padding:0;cursor:pointer}.hotspot:focus-visible{outline:3px solid #5551ff;outline-offset:-3px;background:#5551ff22}.empty-preview{position:absolute;inset:0;display:grid;place-items:center;color:#7a8195;text-align:center;padding:20px}.floating-controls{position:absolute;z-index:10;top:12px;right:12px}.menu-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:48px;height:40px;border:1px solid #dfe2eb;border-radius:12px;background:#fff;color:#35394e;box-shadow:0 4px 20px #20243a21;font-size:18px}.dot{display:inline-block;flex:none;width:7px;height:7px;background:#aeb3c2;border-radius:50%}.dot.online{background:#35b97d}.control-panel{position:absolute;top:48px;right:0;width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - 72px);overflow:auto;padding:18px;border:1px solid #e5e7ef;border-radius:16px;background:#fff;box-shadow:0 12px 35px #20243a2b}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading button{border:0;background:none;font-size:24px;color:#6a7084;line-height:1}.panel-code{margin:18px 0;padding:14px;border-radius:10px;background:#f6f7ff}.eyebrow{display:block;font-size:10px;letter-spacing:.12em;font-weight:700;color:#858ba0}.panel-code strong{display:block;margin-top:4px;font-size:28px;letter-spacing:.15em}.panel-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.panel-tab{display:flex;align-items:center;gap:8px;border:1px solid #e5e7ef;background:#fff;border-radius:8px;padding:7px 9px;font-size:12px}.panel-tab.active{border-color:#c9c6ff;background:#eeedff;color:#302cc0}.size-label{display:block;margin:18px 0 6px;font-size:12px;font-weight:700;color:#565c70}.control-panel select{width:100%;height:36px;border:1px solid #dfe2eb;border-radius:8px;background:#fff;color:#20243a;padding:0 10px}.panel-frame{margin-top:18px}.panel-frame strong{display:block;margin-top:4px;font-size:14px;overflow-wrap:anywhere}.panel-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.panel-actions button,.panel-actions a,.panel-button{border:1px solid #dfe2eb;border-radius:8px;background:#fff;color:#302cc0;padding:7px 9px;font-size:12px;text-decoration:none}.preview-status,.viewer-error{position:absolute;left:50%;bottom:16px;transform:translate(-50%);z-index:4;padding:9px 12px;border-radius:8px;background:#20243ae8;color:#fff;font-size:12px;white-space:nowrap}.viewer-error{bottom:54px;background:#9d5961}.error{color:#9d5961;font-size:13px}