.note-sketch{--sk-desk:var(--bg-muted,#f3f3f1);--sk-panel:var(--bg-card,#fff);--sk-line:var(--border,#0b0b0c16);--sk-line-strong:var(--border-strong,#0b0b0c26);--sk-text:var(--text-main,#1b1b1d);--sk-muted:var(--text-muted,#6b6b73);--sk-faint:var(--text-faint,#a1a1aa);--sk-hover:var(--bg-hover,#0b0b0c0b);--sk-press:var(--bg-press,#0b0b0c13);--sk-accent:var(--accent,#0d99ff);--sk-ink:var(--ink,#0b0b0c);--sk-shadow-lg:var(--shadow-lg,0 2px 6px #0b0b0c0a, 0 24px 60px -18px #0b0b0c42, 0 0 0 1px #0b0b0c16);--sk-shadow-md:var(--shadow-md,0 1px 2px #0b0b0c0a, 0 8px 24px -8px #0b0b0c24, 0 0 0 1px #0b0b0c16);--sk-ease:var(--ui-ease,cubic-bezier(.22, 1, .36, 1));z-index:10060;background:var(--sk-desk);color:var(--sk-text);font-family:var(--ui-sans,"Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif);letter-spacing:-.005em;flex-direction:column;gap:8px;padding:10px 12px 12px;display:flex;position:fixed;inset:0}[data-theme=light] .note-sketch{--sk-desk:#f3f3f1}.note-sketch__bar{background:var(--sk-panel);min-height:48px;box-shadow:inset 0 0 0 1px var(--sk-line);z-index:3;border-radius:16px;flex-shrink:0;justify-content:space-between;align-items:center;gap:.75rem;padding:6px 6px 6px 14px;display:flex;position:relative}.note-sketch__bar-left{align-items:center;gap:.65rem;min-width:0;display:flex}.note-sketch__title{letter-spacing:-.02em;font-size:.95rem;font-weight:600}.note-sketch__zoom{color:var(--sk-faint);font-variant-numeric:tabular-nums;font-size:.72rem}.note-sketch__paper{background:var(--sk-desk);border-radius:10px;flex-wrap:wrap;align-items:center;gap:2px;margin-left:.35rem;padding:3px;display:inline-flex}.note-sketch__paper .sketch-btn{min-height:26px;box-shadow:none;color:var(--sk-muted);background:0 0;border:0;border-radius:7px;padding:.18rem .6rem;font-size:.76rem}.note-sketch__paper .sketch-btn:hover:not(:disabled){color:var(--sk-text);background:0 0}.note-sketch__paper .sketch-btn.is-on{background:var(--sk-panel);color:var(--sk-text);box-shadow:0 0 0 1px var(--sk-line)}.note-sketch__bar-actions{flex-wrap:wrap;justify-content:flex-end;gap:.3rem;display:flex}.note-sketch__tools{background:var(--sk-panel);box-shadow:inset 0 0 0 1px var(--sk-line);border-radius:16px;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.65rem 1rem;padding:.45rem .75rem;display:flex}.note-sketch__modes{scrollbar-width:none;flex-wrap:nowrap;flex-shrink:0;gap:2px;display:flex;overflow-x:auto}.note-sketch__mode,.note-sketch__brush{min-height:32px;color:var(--sk-muted);white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:9px;align-items:center;gap:.28rem;padding:.28rem .6rem;font-size:.78rem;transition:background .14s,color .14s;display:inline-flex}.note-sketch__mode .material-symbols-outlined,.note-sketch__brush .material-symbols-outlined{font-size:1.1rem;line-height:1}.note-sketch__mode:hover,.note-sketch__brush:hover{background:var(--sk-hover);color:var(--sk-text)}.note-sketch__mode.is-active,.note-sketch__brush.is-active{background:var(--sk-accent);color:#fff}.note-sketch__brushes{scrollbar-width:none;flex-wrap:nowrap;align-items:flex-end;gap:.45rem;max-width:min(100%,52rem);display:flex;overflow-x:auto}.note-sketch__brush-group{flex-direction:column;flex-shrink:0;gap:.15rem;display:flex}.note-sketch__brush-group-label{color:var(--sk-faint);letter-spacing:.06em;text-transform:uppercase;padding-left:.2rem;font-size:.62rem;font-weight:600}.note-sketch__brush-group-list{flex-wrap:nowrap;gap:2px;display:flex}.note-sketch__brush--studio{box-shadow:inset 0 0 0 1px var(--sk-line-strong)}.note-sketch__sliders{flex-wrap:wrap;align-items:center;gap:.55rem .85rem;display:flex}.note-sketch__sliders label{color:var(--sk-muted);align-items:center;gap:.35rem;font-size:.72rem;display:inline-flex}.note-sketch__sliders input[type=range]{width:88px;accent-color:var(--sk-accent)}.note-sketch__swatches{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.note-sketch__swatch{cursor:pointer;width:22px;height:22px;transition:box-shadow .14s ease, transform .14s var(--sk-ease);border:0;border-radius:999px;padding:0;box-shadow:inset 0 0 0 1px #0b0b0c24}.note-sketch__swatch:hover{transform:scale(1.08)}.note-sketch__swatch.is-active{box-shadow:inset 0 0 0 1px #0b0b0c24, 0 0 0 2px var(--sk-panel), 0 0 0 4px var(--sk-accent)}.note-sketch__swatch--custom{background:conic-gradient(#ef4444,#eab308,#22c55e,#3b82f6,#a855f7,#ef4444);place-items:center;display:grid;overflow:hidden}.note-sketch__swatch--custom input{opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0}.note-sketch__stage{touch-action:none;cursor:crosshair;overscroll-behavior:none;background:#fff;border-radius:10px;flex:1;min-height:0;position:relative;overflow:hidden;box-shadow:0 1px 2px #0b0b0c0f,0 10px 30px -12px #0b0b0c38,0 0 0 1px #0b0b0c0f}[data-theme=dark] .note-sketch__stage{box-shadow:0 16px 40px -14px #000000bf, 0 0 0 1px var(--sk-line)}.note-sketch__stage.is-panning{cursor:grab}.note-sketch__stage.is-panning:active{cursor:grabbing}.note-sketch__canvas{touch-action:none;width:100%;height:100%;display:block}.note-sketch__hint{color:#fafafa;pointer-events:none;white-space:nowrap;text-overflow:ellipsis;background:#0b0b0cc7;border-radius:999px;max-width:calc(100% - 1.5rem);margin:0;padding:.4rem .8rem;font-size:.72rem;font-weight:500;position:absolute;bottom:.85rem;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 6px 18px -6px #0b0b0c59}.sketch-btn{background:var(--sk-panel,var(--bg-card,#fff));min-height:32px;color:var(--sk-text,var(--text-main,#1b1b1d));box-shadow:inset 0 0 0 1px var(--sk-line-strong,var(--border-strong,#0b0b0c26));font:inherit;cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;gap:.3rem;padding:.3rem .75rem;font-size:.8rem;font-weight:500;transition:background .14s,box-shadow .14s,color .14s;display:inline-flex}.sketch-btn:hover:not(:disabled){background:var(--sk-hover,var(--bg-hover,#0b0b0c0b))}.sketch-btn:focus-visible{box-shadow:inset 0 0 0 1px var(--accent,#0d99ff), var(--focus-ring,0 0 0 3px #0d99ff38);outline:none}.sketch-btn:disabled{opacity:.42;cursor:not-allowed}.sketch-btn--ghost{box-shadow:none;color:var(--sk-muted,var(--text-muted,#6b6b73));background:0 0}.sketch-btn--ghost:hover:not(:disabled){color:var(--sk-text,var(--text-main,#1b1b1d))}.sketch-btn--primary{background:var(--ink,#0b0b0c);color:var(--text-inverse,#fff);box-shadow:inset 0 1px #ffffff1f,0 1px 2px #0b0b0c2e}.sketch-btn--primary:hover:not(:disabled){background:var(--ink-hover,#26262a)}.sketch-studio{z-index:11050;-webkit-backdrop-filter:blur(6px)saturate(1.1);background:#0b0b0c52;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}[data-theme=light] .sketch-studio{background:#f3f3f199}.sketch-studio__panel{background:var(--bg-card,#fff);width:min(720px,100%);max-height:min(90vh,860px);color:var(--text-main,#1b1b1d);border-radius:var(--radius-xl,22px);box-shadow:var(--shadow-lg,0 24px 60px -18px #0b0b0c42, 0 0 0 1px #0b0b0c16);animation:sketch-pop .22s var(--ui-ease,ease-out);border:0;flex-direction:column;display:flex;overflow:hidden}.sketch-studio__head,.sketch-studio__foot{border-bottom:1px solid var(--border,#0b0b0c16);flex-shrink:0;justify-content:space-between;align-items:center;gap:.75rem;padding:.85rem 1.1rem;display:flex}.sketch-studio__foot{border-bottom:0;border-top:1px solid var(--border,#0b0b0c16);justify-content:flex-end}.sketch-studio__head h3{letter-spacing:-.025em;margin:0;font-size:1.02rem;font-weight:600}.sketch-studio__body{grid-template-columns:minmax(180px,.9fr) 1.2fr;gap:.85rem;min-height:0;padding:.95rem 1.1rem;display:grid;overflow:auto}.sketch-studio__preview-wrap{flex-direction:column;gap:.55rem;display:flex}.sketch-studio__preview{width:100%;height:160px;box-shadow:inset 0 0 0 1px var(--border,#0b0b0c16);touch-action:none;cursor:crosshair;background-color:#fff;background-image:radial-gradient(circle at 1px 1px,#0b0b0c1a 1px,#0000 0);background-size:14px 14px;border:0;border-radius:12px}.sketch-studio__pressure{color:var(--text-muted,#6b6b73);margin:0;font-size:.72rem}.sketch-studio__pressure[data-state=yes]{color:var(--accent,#0d99ff)}.sketch-studio__stamp{object-fit:contain;width:48px;height:48px;box-shadow:inset 0 0 0 1px var(--border,#0b0b0c16);image-rendering:pixelated;background:#fff;border:0;border-radius:10px}.sketch-studio__fields{flex-direction:column;gap:.45rem;display:flex}.sketch-studio__row{color:var(--text-muted,#6b6b73);grid-template-columns:6.5rem 1fr 2.4rem;align-items:center;gap:.45rem;font-size:.78rem;display:grid}.sketch-studio__row input[type=text]{min-height:30px;font:inherit;background:var(--bg-card,#fff);color:var(--text-main,#1b1b1d);box-shadow:inset 0 0 0 1px var(--border-strong,#0b0b0c26);border:0;border-radius:8px;grid-column:2/-1;padding:.28rem .55rem;font-size:.8rem}.sketch-studio__row input[type=text]:focus{box-shadow:inset 0 0 0 1px var(--accent,#0d99ff), var(--focus-ring,0 0 0 3px #0d99ff38);outline:none}.sketch-studio__row .menu-select,.sketch-studio__select{grid-column:2/-1;min-width:0}.sketch-studio__row .menu-select-trigger{justify-content:space-between;width:100%}.sketch-studio__file-btn{background:var(--bg-muted,#f3f3f1);min-width:0;min-height:30px;color:var(--text-main,#1b1b1d);font:inherit;cursor:pointer;text-align:left;border:0;border-radius:8px;grid-column:2/-1;align-items:center;gap:.4rem;padding:.32rem .6rem;font-size:.8rem;transition:background .14s;display:inline-flex}.sketch-studio__file-btn:hover{background:var(--bg-press,#0b0b0c13)}.sketch-studio__file-btn .material-symbols-outlined{color:var(--text-muted,#6b6b73);flex-shrink:0;font-size:16px}.sketch-studio__file-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.sketch-studio__row--check input[type=checkbox]{accent-color:var(--accent,#0d99ff);justify-self:start;margin:0}.sketch-studio__row input[type=range]{accent-color:var(--accent,#0d99ff);width:100%}.sketch-studio__row em{font-variant-numeric:tabular-nums;color:var(--text-muted,#6b6b73);text-align:right;font-size:.72rem;font-style:normal}@keyframes sketch-pop{0%{opacity:0;transform:translateY(6px)scale(.985)}to{opacity:1;transform:none}}@media (max-width:720px){.note-sketch{gap:6px;padding:6px 6px 8px}.sketch-studio__body{grid-template-columns:1fr}.note-sketch__hint{font-size:.65rem;bottom:.45rem}.note-sketch__bar{border-radius:14px;flex-wrap:wrap}.note-sketch__stage{border-radius:8px}}.hw-chrome{background:var(--bg-card,#fff);box-shadow:inset 0 0 0 1px var(--border,#0b0b0c16);z-index:2;border-radius:16px;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.35rem .6rem;padding:5px 8px;display:flex;position:relative}.hw-chrome__rail{scrollbar-width:none;box-shadow:inset -1px 0 0 var(--border,#0b0b0c16);flex-wrap:nowrap;align-items:center;gap:2px;padding-right:8px;display:flex;overflow-x:auto}.hw-chrome__tool-wrap{flex-shrink:0;position:relative}.hw-chrome__tool{width:36px;height:36px;color:var(--text-muted,#6b6b73);cursor:pointer;transition:background .14s ease, color .14s ease, transform .14s var(--ui-ease,ease-out);background:0 0;border:none;border-radius:10px;place-items:center;padding:0;display:inline-grid}.hw-chrome__tool .material-symbols-outlined{max-width:24px;font-size:20px;line-height:1}.hw-chrome__tool:hover{background:var(--bg-hover,#0b0b0c0b);color:var(--text-main,#1b1b1d)}.hw-chrome__tool:active{transform:scale(.94)}.hw-chrome__tool.is-active{background:var(--accent,#0d99ff);color:var(--text-inverse);box-shadow:inset 0 1px #ffffff2e,0 1px 2px #0b0b0c33}.hw-chrome__tool.is-active .material-symbols-outlined{font-variation-settings:"FILL" 1, "wght" 400, "GRAD" 0, "opsz" 20}.hw-chrome__tool:focus-visible,.hw-chrome__pin:focus-visible,.hw-chrome__swatch:focus-visible{box-shadow:0 0 0 2px var(--bg-card,#fff), 0 0 0 4px var(--accent,#0d99ff);outline:none}.hw-chrome__flyout{z-index:20;background:var(--bg-card,#fff);min-width:140px;box-shadow:var(--shadow-lg,0 24px 60px -18px #0b0b0c42, 0 0 0 1px #0b0b0c16);animation:sketch-pop .18s var(--ui-ease,ease-out);border:0;border-radius:14px;flex-direction:column;gap:1px;padding:5px;display:flex;position:absolute;top:calc(100% + 8px);left:0}.hw-chrome__flyout button{min-height:32px;font:inherit;color:var(--text-main,#1b1b1d);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:.45rem;padding:.35rem .55rem;font-size:.78rem;display:flex}.hw-chrome__flyout button:hover{background:var(--bg-hover,#0b0b0c0b)}.hw-chrome__flyout button.is-on{background:color-mix(in srgb, var(--accent,#0d99ff) 12%, transparent);color:var(--accent,#0d99ff);font-weight:500}.hw-chrome__flyout .material-symbols-outlined{font-size:1.05rem}.hw-chrome__sub{background:var(--bg-muted,#f3f3f1);border-radius:10px;gap:2px;padding:3px;display:inline-flex}.hw-chrome__sub button{min-height:26px;font:inherit;color:var(--text-muted,#6b6b73);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:.2rem .55rem;font-size:.72rem;font-weight:500}.hw-chrome__sub button:hover{color:var(--text-main,#1b1b1d)}.hw-chrome__sub button.is-on{background:var(--bg-card,#fff);color:var(--text-main,#1b1b1d);box-shadow:0 0 0 1px var(--border,#0b0b0c16)}.hw-chrome__pins{align-items:center;gap:2px;display:flex}.hw-chrome__pin{width:34px;height:34px;color:var(--text-muted,#6b6b73);cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;padding:0;transition:background .14s,color .14s;display:grid}.hw-chrome__pin .material-symbols-outlined{font-size:1.15rem}.hw-chrome__pin:hover{background:var(--bg-hover,#0b0b0c0b);color:var(--text-main,#1b1b1d)}.hw-chrome__pin.is-active{background:color-mix(in srgb, var(--accent,#0d99ff) 12%, transparent);color:var(--accent,#0d99ff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent,#0d99ff) 55%, transparent)}.hw-chrome__pin--more{color:var(--text-faint,#a1a1aa)}.hw-chrome__brush-panel{z-index:30;background:var(--bg-card,#fff);width:min(320px,100vw - 2rem);max-height:280px;box-shadow:var(--shadow-lg,0 24px 60px -18px #0b0b0c42, 0 0 0 1px #0b0b0c16);animation:sketch-pop .18s var(--ui-ease,ease-out);border:0;border-radius:14px;flex-direction:column;gap:1px;padding:5px;display:flex;position:absolute;top:calc(100% + 8px);left:.65rem;overflow:auto}.hw-chrome__brush-row{align-items:stretch;gap:2px;display:flex}.hw-chrome__brush-pick{cursor:pointer;text-align:left;min-height:32px;font:inherit;color:var(--text-main,#1b1b1d);background:0 0;border:none;border-radius:6px;flex:1;align-items:center;gap:.5rem;padding:.35rem .55rem;font-size:.8rem;display:flex}.hw-chrome__brush-pick:hover{background:var(--bg-hover,#0b0b0c0b)}.hw-chrome__brush-pick.is-active{background:color-mix(in srgb, var(--accent,#0d99ff) 12%, transparent);color:var(--accent,#0d99ff);font-weight:500}.hw-chrome__brush-pick .material-symbols-outlined{color:var(--text-muted,#6b6b73);font-size:1.05rem}.hw-chrome__brush-pick.is-active .material-symbols-outlined{color:inherit}.hw-chrome__brush-star{width:30px;color:var(--text-faint,#a1a1aa);cursor:pointer;background:0 0;border:none;border-radius:6px}.hw-chrome__brush-star:hover{background:var(--bg-hover,#0b0b0c0b)}.hw-chrome__brush-star.is-on,.hw-chrome__brush-star:hover{color:var(--ui-yellow,#ffb800)}.hw-chrome__sliders{flex-wrap:wrap;align-items:center;gap:.45rem .75rem;display:flex}.hw-chrome__sliders label{color:var(--text-muted,#6b6b73);align-items:center;gap:.4rem;font-size:.7rem;display:inline-flex}.hw-chrome__sliders input[type=range]{width:88px;accent-color:var(--accent,#0d99ff)}.hw-chrome__swatches{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.hw-chrome__swatch{cursor:pointer;width:22px;height:22px;transition:box-shadow .14s ease, transform .14s var(--ui-ease,ease-out);background:#fff;border:0;border-radius:999px;padding:0;box-shadow:inset 0 0 0 1px #0b0b0c24}.hw-chrome__swatch:hover{transform:scale(1.08)}.hw-chrome__swatch.is-active{box-shadow:inset 0 0 0 1px #0b0b0c24, 0 0 0 2px var(--bg-card,#fff), 0 0 0 4px var(--accent,#0d99ff);outline:none}.hw-chrome__swatch--custom{background:conic-gradient(#ef4444,#eab308,#22c55e,#06b6d4,#3b82f6,#a855f7,#ef4444);place-items:center;display:grid;overflow:hidden}.hw-chrome__swatch--custom input{opacity:0;cursor:pointer;border:none;width:100%;height:100%;padding:0}@media (max-width:720px){.hw-chrome{border-radius:14px}.hw-chrome__tool{width:34px;height:34px}}@media (prefers-reduced-motion:reduce){.sketch-studio__panel,.hw-chrome__flyout,.hw-chrome__brush-panel{animation:none}.hw-chrome__tool,.hw-chrome__swatch,.note-sketch__swatch{transition:none}}[data-reduce-motion="1"] .sketch-studio__panel,[data-reduce-motion="1"] .hw-chrome__flyout,[data-reduce-motion="1"] .hw-chrome__brush-panel{animation:none}
