@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Mono:wght@300;400&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--paper:#fdfaf4;--paper-alt:#f5f0e6;--paper-deep:#ede6d6;--ink:#1a1209;--ink-mid:#4a3f2f;--ink-light:#8c7b66;--ink-faint:#c5b89a;--rule:#d8cbb5;--accent:#1b3a6b;--accent-2:#7c1515;--shadow-sm:0 1px 4px #1a120914;--shadow-md:0 4px 20px #1a12091f;--shadow-lg:0 8px 40px #1a120929;--radius:6px;--font-serif:"Cormorant Garamond", Georgia, serif;--font-mono:"DM Mono", "Courier New", monospace;--transition:.18s cubic-bezier(.4,0,.2,1)}html{scroll-behavior:smooth;font-size:16px}body{background:var(--paper-alt);color:var(--ink);font-family:var(--font-serif);-webkit-font-smoothing:antialiased;overscroll-behavior:none;min-height:100dvh}.page{max-width:680px;margin:0 auto;padding:0 1.25rem 3rem}.header{border-bottom:1px solid var(--rule);flex-wrap:wrap;align-items:baseline;gap:1.25rem;margin-bottom:1.75rem;padding:2rem 0 1.25rem;display:flex}.logo{color:var(--ink);align-items:center;gap:.5rem;display:flex}.logo svg{flex-shrink:0}.logo-text{letter-spacing:.04em;font-size:1.7rem;font-weight:400;line-height:1}.tagline{color:var(--ink-light);font-size:.95rem;font-style:italic;font-weight:300}.main{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}.toolbar{border-bottom:1px solid var(--rule);background:var(--paper-alt);justify-content:space-between;align-items:center;gap:.5rem;padding:.65rem .9rem;display:flex}.tool-group{align-items:center;gap:.45rem;display:flex}.tool-actions{margin-left:auto}.color-btn{background:var(--c);cursor:pointer;width:22px;height:22px;transition:transform var(--transition), border-color var(--transition);border:2px solid #0000;border-radius:50%;flex-shrink:0}.color-btn:hover{transform:scale(1.15)}.color-btn.active{border-color:var(--c);outline:2px solid var(--paper);outline-offset:-4px;transform:scale(1.12)}.tool-btn{border:1px solid var(--rule);border-radius:var(--radius);width:32px;height:32px;color:var(--ink-mid);cursor:pointer;transition:background var(--transition), color var(--transition), border-color var(--transition);background:0 0;place-items:center;display:grid}.tool-btn:hover{background:var(--paper-deep);color:var(--ink);border-color:var(--ink-faint)}.tool-btn:active{transform:scale(.94)}.canvas-wrap{background:var(--paper);cursor:crosshair;touch-action:none;width:100%;height:clamp(200px,38vw,320px);position:relative}.canvas-baseline{background:var(--rule);pointer-events:none;z-index:1;height:1px;position:absolute;bottom:28%;left:5%;right:5%}#sig-canvas{z-index:2;width:100%;height:100%;display:block;position:absolute;inset:0}.canvas-hint{color:var(--ink-faint);letter-spacing:.06em;pointer-events:none;z-index:3;transition:opacity var(--transition);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;font-size:1rem;font-style:italic;font-weight:300;display:flex;position:absolute;inset:0}.canvas-hint.hidden{opacity:0}.canvas-hint svg{opacity:.5}.actions{border-top:1px solid var(--rule);background:var(--paper-alt);justify-content:flex-end;gap:.75rem;padding:.9rem 1rem;display:flex}.btn-primary,.btn-secondary,.btn-danger{font-family:var(--font-mono);letter-spacing:.06em;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);text-transform:uppercase;border:1px solid #0000;align-items:center;gap:.45rem;padding:.52rem 1.1rem;font-size:.72rem;font-weight:400;display:inline-flex}.btn-primary:active,.btn-secondary:active,.btn-danger:active{transform:scale(.96)}.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn-primary:hover{background:var(--ink-mid);border-color:var(--ink-mid)}.btn-secondary{color:var(--ink-mid);border-color:var(--rule);background:0 0}.btn-secondary:hover{background:var(--paper-deep);border-color:var(--ink-faint);color:var(--ink)}.btn-danger{color:var(--accent-2);background:0 0;border-color:#7c151540;font-size:.68rem}.btn-danger:hover{border-color:var(--accent-2);background:#7c15150f}.toast{background:var(--ink);color:var(--paper);font-family:var(--font-mono);letter-spacing:.05em;opacity:0;pointer-events:none;white-space:nowrap;z-index:100;box-shadow:var(--shadow-lg);border-radius:100px;padding:.55rem 1.2rem;font-size:.72rem;transition:opacity .25s,transform .25s;position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%)translateY(8px)}.toast.visible{opacity:1;transform:translate(-50%)translateY(0)}.toast.warn{background:#5c4000}.gallery-section{margin-top:2.5rem}.gallery-header{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:1rem;display:flex}.gallery-title{color:var(--ink-mid);letter-spacing:.03em;font-size:1.3rem;font-style:italic;font-weight:400}.gallery{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem;display:grid}.gallery-empty{color:var(--ink-faint);text-align:center;padding:2rem 0;font-size:.9rem;font-style:italic;display:none}.sig-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition), transform var(--transition);position:relative;overflow:hidden}.sig-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.sig-card img{object-fit:contain;width:100%;height:110px;padding:.5rem;display:block}.sig-card figcaption{font-family:var(--font-mono);color:var(--ink-light);border-top:1px solid var(--rule);background:var(--paper-alt);padding:.35rem .6rem;font-size:.63rem}.card-dl{background:var(--paper);border:1px solid var(--rule);width:26px;height:26px;color:var(--ink-mid);cursor:pointer;opacity:0;transition:opacity var(--transition), background var(--transition);border-radius:4px;place-items:center;display:grid;position:absolute;top:.4rem;right:.4rem}.sig-card:hover .card-dl{opacity:1}.card-dl:hover{background:var(--paper-deep);color:var(--ink)}.mode-tabs{border-bottom:1px solid var(--rule);gap:0;margin-bottom:1.5rem;display:flex}.mode-tab{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light);cursor:pointer;transition:color var(--transition), border-color var(--transition);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:.6rem 1.4rem;font-size:.72rem}.mode-tab:hover{color:var(--ink)}.mode-tab.active{color:var(--ink);border-bottom-color:var(--ink)}.ref-status{border-top:1px solid var(--rule);background:var(--paper-alt);padding:.55rem .9rem}.ref-status-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.ref-label{font-family:var(--font-mono);color:var(--ink-light);letter-spacing:.04em;font-size:.68rem}.ref-actions{gap:.4rem;display:flex}.btn-ghost{font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink-mid);cursor:pointer;transition:all var(--transition);background:0 0;align-items:center;gap:.35rem;padding:.35rem .7rem;font-size:.65rem;display:inline-flex}.btn-ghost:hover{background:var(--paper-deep);border-color:var(--ink-faint);color:var(--ink)}.btn-ghost:active{transform:scale(.95)}.btn-ghost-danger{color:var(--accent-2);border-color:#7c151540}.btn-ghost-danger:hover{border-color:var(--accent-2);background:#7c15150f}.score-panel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-top:1.25rem;animation:.25s both slideDown;overflow:hidden}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.score-header{border-bottom:1px solid var(--rule);background:var(--paper-alt);align-items:center;gap:1.25rem;padding:1rem 1.25rem;display:flex}.score-circle-wrap{flex-shrink:0;width:60px;height:60px;position:relative}.score-ring{width:60px;height:60px}.score-arc{transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1),stroke .4s}.score-pct{font-family:var(--font-mono);color:var(--ink);justify-content:center;align-items:center;font-size:.75rem;font-weight:400;display:flex;position:absolute;inset:0}.score-meta{flex-direction:column;gap:.25rem;display:flex}.score-verdict{font-size:1.25rem;font-weight:400;font-family:var(--font-serif)}.score-excellent{color:#1a4d2e}.score-good{color:#1b3a6b}.score-fair{color:#8c5a00}.score-low{color:#7c1515}.score-vs{font-family:var(--font-mono);color:var(--ink-light);letter-spacing:.04em;font-size:.65rem}.metric-rows{flex-direction:column;gap:.55rem;padding:.75rem 1.25rem;display:flex}.metric-row{grid-template-columns:1fr auto auto;align-items:center;gap:.6rem;display:grid}.metric-label{font-family:var(--font-mono);color:var(--ink-mid);letter-spacing:.04em;white-space:nowrap;font-size:.65rem}.metric-bar-track{background:var(--rule);border-radius:2px;width:80px;height:4px;overflow:hidden}.metric-bar-fill{background:var(--bar-clr,var(--ink));border-radius:2px;height:100%;transition:width .7s cubic-bezier(.4,0,.2,1)}.metric-pct{font-family:var(--font-mono);color:var(--ink-light);text-align:right;width:2.8em;font-size:.63rem}.score-tip{color:var(--ink-light);min-height:1.4em;padding:0 1.25rem .75rem;font-size:.82rem;font-style:italic}.card-score{font-family:var(--font-mono);letter-spacing:.04em;z-index:2;border-radius:3px;padding:.18rem .45rem;font-size:.6rem;font-weight:400;position:absolute;top:.4rem;left:.4rem}.card-score.score-excellent{color:#1a4d2e;background:#1a4d2e1f}.card-score.score-good{color:#1b3a6b;background:#1b3a6b1f}.card-score.score-fair{color:#8c5a00;background:#8c5a001f}.card-score.score-low{color:#7c1515;background:#7c15151f}.section-label{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light);margin-bottom:.6rem;font-size:.68rem}.ref-preview-wrap{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:1.5rem;padding:.75rem 1rem;overflow:hidden}.ref-preview-inner{align-items:center;gap:1rem;display:flex}.ref-preview-wrap img{object-fit:contain;background:var(--paper-alt);border:1px solid var(--rule);border-radius:4px;max-width:200px;height:70px;padding:.25rem}.ref-preview-meta{font-family:var(--font-mono);color:var(--ink-light);font-size:.65rem}.footer{border-top:1px solid var(--rule);font-size:.75rem;font-family:var(--font-mono);color:var(--ink-faint);letter-spacing:.03em;justify-content:center;align-items:center;gap:.4rem;margin-top:2.5rem;padding-top:1rem;display:flex}@media (width<=480px){.page{padding:0 .85rem 2.5rem}.header{flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:1.25rem;padding:1.25rem 0 1rem}.logo-text{font-size:1.45rem}.tagline{font-size:.85rem}.toolbar{padding:.5rem .7rem}.color-btn{width:20px;height:20px}.canvas-wrap{height:clamp(180px,55vw,240px)}.actions{gap:.5rem;padding:.75rem}.btn-primary,.btn-secondary{padding:.5rem .85rem;font-size:.67rem}.gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.65rem}.score-header{gap:.9rem;padding:.75rem .9rem}.metric-rows{padding:.6rem .9rem}.score-tip{padding:0 .9rem .6rem}.metric-bar-track{width:55px}.ref-status{padding:.45rem .7rem}.btn-ghost{padding:.3rem .55rem;font-size:.6rem}.mode-tab{padding:.55rem 1rem;font-size:.67rem}.sig-card img{height:90px}.card-dl{opacity:1}.gallery-title{font-size:1.1rem}}@media (resolution>=2x){.canvas-baseline{height:.5px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation-duration:0s!important}}