.ruler-hero-section{position:relative;width:100%;height:calc(100vh - var(--header-height));min-height:520px;overflow:hidden;background-color:var(--color-canvas-soft);border-bottom:1px solid var(--color-hairline)}.ruler-island-container{width:100%;height:100%;position:relative;border-radius:0;border:none;background-color:var(--color-canvas);margin-bottom:0}.ruler-surface-area{position:fixed;top:var(--header-height);left:0;right:0;bottom:0;background-color:var(--color-canvas-soft);overflow:hidden;cursor:default;z-index:1}.parallax-content-section{position:relative;z-index:10;background-color:var(--color-canvas-soft)}.ruler-canvas{position:absolute;z-index:10}.top-canvas{top:0;left:0;right:0;height:40px;width:100%}.bottom-canvas{bottom:0;left:0;right:0;height:40px;width:100%}.left-canvas{top:0;left:0;bottom:0;width:40px;height:100%}.right-canvas{top:0;right:0;bottom:0;width:40px;height:100%}.edge-btn,.tool-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--color-hairline-strong);background-color:var(--color-canvas-soft-2);color:var(--color-ink)!important;transition:all .15s ease;cursor:pointer}.edge-btn svg,.tool-btn svg{color:currentColor!important;stroke:currentColor!important}.edge-btn:hover,.tool-btn:hover{border-color:var(--color-primary);color:var(--color-primary)!important}.edge-btn[aria-pressed=true],.edge-btn.active,.tool-btn.active{background-color:var(--color-primary)!important;color:var(--color-on-primary)!important;border-color:var(--color-primary)!important}.edge-btn[aria-pressed=true] svg,.edge-btn.active svg,.tool-btn.active svg{color:var(--color-on-primary)!important;stroke:var(--color-on-primary)!important}.crosshair-line-h{position:absolute;left:0;right:0;height:1px;background:#0070f366;pointer-events:none;display:none;z-index:15}.crosshair-line-v{position:absolute;top:0;bottom:0;width:1px;background:#0070f366;pointer-events:none;display:none;z-index:15}.guides-overlay-layer{position:absolute;inset:0;z-index:12;pointer-events:none}.guide-line{position:absolute;z-index:14;pointer-events:auto;cursor:pointer}.guide-line-v{top:0;bottom:0;border-left:1px dashed var(--color-primary)}.guide-line-h{left:0;right:0;border-top:1px dashed var(--color-primary)}.guide-badge{position:absolute;padding:2px 8px;border-radius:var(--radius-pill);background-color:var(--color-primary);color:var(--color-on-primary);font-family:var(--font-mono);font-size:10px;font-weight:500;line-height:1.4;white-space:nowrap;box-shadow:var(--shadow-sm)}.guide-line-v .guide-badge{top:48px;left:0;transform:translate(-50%)}.guide-line-h .guide-badge{left:48px;top:0;transform:translateY(-50%)}.cursor-readout-badge{position:absolute;pointer-events:none;padding:3px 8px;border-radius:var(--radius-xs);font-size:11px;font-family:var(--font-mono);color:var(--color-on-primary);background-color:var(--color-primary);white-space:nowrap;transform:translate(12px,-50%);display:none;z-index:25;box-shadow:var(--shadow-sm)}.welcome-banner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:2rem 1.5rem;background-color:var(--color-canvas-soft);z-index:8;text-align:center}.welcome-icon-box{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background-color:var(--color-canvas);box-shadow:inset 0 0 0 1px #00000014,var(--shadow-sm);color:var(--color-ink)}.welcome-banner h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--color-ink);margin:0}.welcome-banner p{font-size:.875rem;color:var(--color-body);max-width:420px;margin:0;line-height:1.5}.quick-edge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;max-width:440px}@media(min-width:480px){.quick-edge-grid{grid-template-columns:repeat(4,1fr)}}.edge-quick-btn{text-align:left;padding:10px 12px;border-radius:8px;background-color:var(--color-canvas);box-shadow:inset 0 0 0 1px #00000014,var(--shadow-sm);border:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.edge-quick-btn:hover{box-shadow:inset 0 0 0 1px var(--color-primary),var(--shadow-md)}.quick-label{font-size:10px;font-weight:600;font-family:var(--font-mono);color:var(--color-mute);display:block;margin-bottom:2px}.quick-title{font-size:12px;font-weight:500;color:var(--color-ink)}.cal-status-pill{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--radius-pill);background-color:var(--color-canvas);box-shadow:inset 0 0 0 1px #00000014,var(--shadow-sm);font-size:12px;color:var(--color-body);transition:all .15s ease}.cal-status-pill:hover{background-color:var(--color-canvas-soft-2)}.status-dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-warning)}.modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem;background-color:#0006;backdrop-filter:blur(4px)}.modal-card{background-color:var(--color-canvas);border-radius:var(--radius-lg);box-shadow:var(--shadow-level-5);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;border:1px solid var(--color-hairline)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--color-hairline)}.modal-tag{font-size:10px;font-family:var(--font-mono);letter-spacing:.08em;color:var(--color-mute);display:block}.modal-header h2{font-size:1.125rem;font-weight:600;letter-spacing:-.02em;margin:0}.modal-close-icon{font-size:1.5rem;line-height:1;color:var(--color-mute)}.cal-tabs{display:flex;gap:4px;padding:.75rem 1.25rem 0}.cal-method-btn{flex:1;padding:.5rem;font-size:.8125rem;font-weight:500;border-radius:var(--radius-sm);color:var(--color-body);transition:all .15s ease}.cal-method-btn:hover{background-color:var(--color-canvas-soft-2)}.cal-panels-container{padding:1.25rem 1.5rem 1.5rem}.auto-detect-box{display:flex;align-items:center;gap:.875rem;padding:1rem;border-radius:var(--radius-md);background-color:var(--color-canvas-soft-2)}.device-list-scroll{max-height:260px;overflow-y:auto;border:1px solid var(--color-hairline);border-radius:var(--radius-md)}.form-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.5rem}.form-input-group{display:flex;gap:.5rem}.form-input{flex:1;height:38px;padding:0 .75rem;border-radius:var(--radius-sm);border:1px solid var(--color-hairline);background-color:var(--color-canvas);color:var(--color-ink)}.card-instruction-banner{font-size:.8125rem;background-color:var(--color-canvas-soft-2);padding:.875rem;border-radius:var(--radius-md);line-height:1.6;margin-bottom:1rem}.slider-box{margin-bottom:1rem}.flex-between{display:flex;justify-content:space-between;font-size:.75rem;color:var(--color-body);margin-bottom:.375rem}.range-slider{width:100%}.card-preview-overlay{position:fixed;right:0;top:50%;transform:translateY(-50%);background-color:var(--color-canvas-soft-2);border:2px solid var(--color-primary);border-right:none;border-radius:var(--radius-md) 0 0 var(--radius-md);z-index:110;box-shadow:var(--shadow-level-5);display:flex;align-items:center;justify-content:center}.card-preview-inner{text-align:center;padding:.75rem;pointer-events:none;user-select:none}.card-title{display:block;font-size:11px;font-weight:700;color:var(--color-ink);margin-bottom:4px}.card-specs{display:block;font-size:10px;font-family:var(--font-mono);color:var(--color-mute)}.guide-step{display:flex;gap:.875rem;margin-bottom:1.25rem}.step-num{width:22px;height:22px;border-radius:50%;background-color:var(--color-canvas-soft-2);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--color-ink);flex-shrink:0}.guide-step h3{font-size:.9375rem;font-weight:600;margin:0 0 .25rem}.guide-step p{font-size:.8125rem;color:var(--color-mute);margin:0;line-height:1.5}.shortcuts-section{border-top:1px solid var(--color-hairline);padding-top:1rem;margin-top:1rem}.shortcuts-section h3{font-size:.875rem;font-weight:600;margin-bottom:.75rem}.shortcut-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--color-hairline);font-size:.8125rem;color:var(--color-mute)}kbd{background-color:var(--color-canvas-soft-2);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:11px;border:1px solid var(--color-hairline);color:var(--color-ink);font-weight:600}.kbd-group{display:flex;gap:4px}@media(max-width:640px){.hidden-mobile{display:none}}.measure-layer{position:absolute;inset:0;z-index:5;--measure-stroke: #22c55e;--measure-fill: rgba(34, 197, 94, .08)}[data-theme=dark] .measure-layer,html.dark .measure-layer{--measure-stroke: #4ade80;--measure-fill: rgba(74, 222, 128, .1)}.measure-svg{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.measure-svg .measure-hit{cursor:crosshair}.measure-shape .measure-hit:hover{filter:brightness(1.1)}.measure-shape.selected .measure-hit{cursor:move}.measure-handle{fill:var(--color-canvas);stroke:var(--color-primary);stroke-width:2;cursor:grab}.measure-handle:hover{fill:var(--color-primary)}.measure-handle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.measure-label{fill:var(--color-ink);font-family:var(--font-mono);font-size:11px;font-weight:600;paint-order:stroke;stroke:var(--color-canvas);stroke-width:3px;stroke-linejoin:round;pointer-events:none;user-select:none}.measure-toolbar{position:absolute;top:52px;left:52px;z-index:20;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--radius-md);background-color:var(--color-canvas);border:1px solid var(--color-hairline);box-shadow:var(--shadow-md);flex-wrap:wrap;max-width:calc(100% - 104px)}.measure-tool{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;color:var(--color-body);background:none;border:none;cursor:pointer;transition:background-color .15s ease,color .15s ease}.measure-tool:hover{background-color:var(--color-canvas-soft-2);color:var(--color-ink)}.measure-tool.active{background-color:var(--color-primary);color:var(--color-on-primary)}.measure-tool:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}.measure-divider{width:1px;height:20px;background-color:var(--color-hairline)}.measure-dropdown{position:relative}.measure-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:180px;padding:4px;border-radius:var(--radius-sm);background-color:var(--color-canvas);border:1px solid var(--color-hairline);box-shadow:var(--shadow-md);display:none;flex-direction:column;gap:2px}.measure-dropdown:hover .measure-menu,.measure-dropdown:focus-within .measure-menu{display:flex}.measure-menu button{text-align:left;padding:6px 8px;border-radius:var(--radius-xs);font-size:12px;color:var(--color-body);background:none;cursor:pointer}.measure-menu button:hover{background-color:var(--color-canvas-soft-2);color:var(--color-ink)}.measure-image-tools{position:absolute;top:92px;left:52px;z-index:20;display:flex;gap:4px;padding:4px;border-radius:var(--radius-sm);background-color:var(--color-canvas);border:1px solid var(--color-hairline);box-shadow:var(--shadow-sm)}.measure-badge{position:absolute;z-index:22;padding:3px 8px;border-radius:var(--radius-xs);font-size:11px;font-family:var(--font-mono);color:var(--color-on-primary);background-color:var(--color-primary);white-space:nowrap;pointer-events:none;transform:translateY(-50%);box-shadow:var(--shadow-sm)}.measure-calib-banner{position:absolute;bottom:16px;left:50%;transform:translate(-50%);z-index:21;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:var(--radius-pill);background-color:var(--color-canvas);border:1px solid var(--color-hairline-strong);box-shadow:var(--shadow-md);font-size:12px;color:var(--color-body)}.measure-calib-banner button{font-size:12px;font-weight:600;color:var(--color-primary);background:none;border:none;cursor:pointer}.measure-empty{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;padding:1.5rem;text-align:center}.measure-empty-hint{font-size:14px;color:var(--color-mute);font-weight:500}.measure-gesture{width:120px;height:44px;overflow:visible}.measure-gesture .track{stroke:var(--color-hairline-strong);stroke-width:2;stroke-dasharray:3 4;fill:none}.measure-gesture .dot{fill:var(--color-primary)}.measure-gesture .pointer{fill:var(--color-ink);animation:measure-drag 2.4s ease-in-out infinite}@keyframes measure-drag{0%{transform:translate(0)}15%{transform:translate(0)}60%{transform:translate(96px)}75%{transform:translate(96px)}to{transform:translate(0)}}.measure-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;pointer-events:auto}.measure-chip{padding:7px 13px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;color:var(--color-ink);background-color:var(--color-canvas);border:1px solid var(--color-hairline);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.measure-chip:hover{border-color:var(--color-primary);background-color:var(--color-canvas-soft-2)}.measure-chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}@media(prefers-reduced-motion:reduce){.measure-gesture .pointer{animation:none}}@media(max-width:640px){.measure-toolbar{top:48px;left:48px}.measure-image-tools{top:88px;left:48px}}