:root{font-family:Inter,Noto Sans JP,Hiragino Sans,system-ui,sans-serif;color:#17212b;background:#dfe4e7;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{min-width:1024px;min-height:720px;overflow:auto}button{font:inherit}button:focus-visible{outline:3px solid rgb(17 121 164 / 35%);outline-offset:2px}button:disabled{cursor:default}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.icon{width:17px;height:17px;fill:none;stroke:currentcolor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}.app-shell{width:100%;height:100%;min-width:1024px;min-height:720px;display:grid;grid-template-rows:58px minmax(0,1fr);overflow:hidden;background:#eef1f2;position:relative}.topbar{display:grid;grid-template-columns:230px minmax(0,1fr) auto;align-items:center;border-bottom:1px solid #ccd4d8;background:#fcfdfd;z-index:3}.brand-block{height:100%;display:flex;align-items:center;gap:10px;padding:0 15px;border-right:1px solid #d7dde0}.brand-mark{width:30px;height:30px;display:grid;place-items:center;color:#f5f8fa;background:#1f5d73;border-radius:5px}.brand-block h1{margin:0;font-size:18px;line-height:1.15;letter-spacing:.02em}.project-title{min-width:0;padding:0 16px;overflow:hidden;color:#48565e;font-size:14px;white-space:nowrap;text-overflow:ellipsis}.top-actions{display:flex;align-items:center;gap:6px;padding-right:11px}.export-progress{position:absolute;z-index:6;top:66px;right:12px;display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid #bdc9ce;border-radius:6px;color:#26323a;background:#fff;box-shadow:0 3px 12px #192d3629;font-size:12px}.export-progress progress{width:140px}.export-progress strong{min-width:34px;text-align:right}.button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #c7d0d4;border-radius:5px;padding:6px 11px;color:#2d3a41;background:#fff;font-size:13px;font-weight:650}.button:disabled{color:#758188;background:#f5f7f8;opacity:.72}.button.primary{border-color:#176b8c;color:#fff;background:#176b8c}.button.primary:disabled{border-color:#87a9b6;color:#eef5f7;background:#87a9b6}.button.danger-quiet{width:100%;color:#7e4d58;background:#fff}.workspace{min-height:0;display:grid;grid-template-columns:230px minmax(320px,.51fr) 0 minmax(380px,.49fr)}.pane-splitter{position:relative;z-index:2;width:10px;margin-left:-5px;cursor:col-resize;touch-action:none}.pane-splitter:after{content:"";position:absolute;inset:0 3px;transition:background-color .12s}.pane-splitter:hover:after,.pane-splitter:active:after,.pane-splitter:focus-visible:after{background:#176b8c}.pane-splitter:focus-visible{outline:none}.drawing-panel,.source-panel,.composition-panel{min-width:0;min-height:0;overflow:hidden}.drawing-panel{display:flex;flex-direction:column;border-right:1px solid #ccd4d8;background:#f8fafb}.add-button{height:40px;flex:0 0 auto;margin:10px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px dashed #6f929f;border-radius:5px;color:#315e6e;background:#fff;font-size:14px;font-weight:700;cursor:pointer}.add-button:hover:not(:disabled){border-style:solid;background:#f2f8fa}.drawing-list{flex:1;min-height:0;overflow:auto;padding:0 7px}.drawing-row{min-height:64px;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:stretch;margin-bottom:4px;border:1px solid transparent;border-radius:5px;overflow:hidden}.drawing-row.active{border-color:#74aabb;background:#e8f2f5;box-shadow:inset 3px 0 #1d708e}.drawing-select{min-width:0;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:9px;padding:7px 2px 7px 8px;border:0;color:inherit;background:transparent;text-align:left;cursor:pointer}.thumbnail{width:46px;height:46px;display:grid;place-items:center;overflow:hidden;border:1px solid #bdc6ca;border-radius:3px;background:#fff}.thumbnail canvas{display:block;width:100%;height:100%;object-fit:contain}.drawing-copy{min-width:0;display:block}.drawing-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:400}.icon-button{width:34px;display:grid;place-items:center;border:0;color:#426b79;background:transparent;cursor:pointer}.icon-button:hover{background:#2a5b6c14}.drawing-footer{flex:0 0 auto;padding:9px;border-top:1px solid #d7dde0}.source-panel{display:grid;grid-template-rows:minmax(0,1fr);background:#d9dfe2}.source-panel.with-controls{grid-template-rows:minmax(0,1fr) minmax(54px,auto)}.mode-switch{flex:0 0 auto;display:flex;padding:2px;border:1px solid #c7d0d4;border-radius:5px;background:#edf1f2}.mode-switch button{min-height:32px;border:0;border-radius:3px;padding:5px 9px;color:#5c6970;background:transparent;font-size:12px;font-weight:650;cursor:pointer}.mode-switch button.active{color:#115f7e;background:#fff;box-shadow:0 1px 3px #1a2b3226}.mode-switch.compact button{min-height:26px;padding:3px 8px;font-size:12px}.mode-switch button:disabled{color:#98a2a7;cursor:default}.processing-settings{display:grid;gap:13px;padding:13px 14px 16px;color:#43545c;font-size:12px}.processing-view,.contrast-field{display:flex;align-items:center;justify-content:space-between;gap:8px}.processing-field{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.processing-field.contrast-field{display:flex;justify-content:space-between}.processing-field input[type=range]{width:132px}.canvas-area,.composition-canvas{position:relative;min-height:0;overflow:hidden}.floating-tools{position:absolute;z-index:4;top:10px;display:flex;gap:6px}.source-floating-tools{left:50%;z-index:6;transform:translate(-50%)}.composition-floating-tools{left:10px;z-index:6}.composition-tool-row{display:flex;gap:6px}.composition-apply{position:absolute;z-index:6;top:10px;right:10px;box-shadow:0 2px 8px #23303624}.settings-dismiss-layer{position:absolute;z-index:5;inset:0}.settings-popover{position:absolute;top:calc(100% + 7px);left:0;width:268px;overflow:hidden;border:1px solid #bfc9ce;border-radius:7px;color:#26323a;background:#fff;box-shadow:0 12px 30px #141e233b}.processing-settings-popover{right:0;left:auto}.settings-popover-heading{min-height:42px;display:flex;align-items:center;justify-content:space-between;padding:4px 8px 4px 14px;border-bottom:1px solid #e1e6e8;font-size:13px}.settings-popover-heading button{width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:4px;color:#43545c;background:transparent;cursor:pointer}.floating-tool{min-height:34px;padding:5px 10px;white-space:nowrap;border-color:#65747b6b;background:#fffffff0;box-shadow:0 2px 8px #23303624;font-size:12px}.floating-tool.active{border-color:#176b8c;color:#115f7e;background:#e8f3f7}.canvas-area .loupe,.composition-canvas .loupe{top:54px}.canvas-area{background-color:#d8dee1;background-image:radial-gradient(#bac4c8 .65px,transparent .65px);background-size:10px 10px}.preview-surface{width:100%;height:100%;position:relative;display:grid;place-items:center;overflow:hidden;touch-action:none;container-type:size}.preview-surface:focus{outline:none}.preview-surface.can-pan{cursor:grab}.preview-surface.can-pan:active{cursor:grabbing}.source-paper{--paper-aspect: 1;position:relative;width:min(84cqw,680px,calc(84cqh * var(--paper-aspect)));aspect-ratio:var(--paper-aspect);display:grid;place-items:center;background:#fff;box-shadow:0 4px 18px #28363c38;transform-origin:center;will-change:transform}.source-paper canvas{width:100%;height:100%;display:block;object-fit:contain}.clip-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.clip-outside{fill:#17212b52}.clip-outline{fill:none;stroke:#176b8c;stroke-width:1.5px;vector-effect:non-scaling-stroke}.clip-outline.open{stroke-dasharray:5 3}.clip-edge-hit{stroke:transparent;stroke-width:14px;pointer-events:stroke;cursor:context-menu}.clip-vertex{fill:#fff;stroke:#176b8c;stroke-width:1.5px;vector-effect:non-scaling-stroke;pointer-events:all;cursor:move}.clip-vertex.closable{fill:#d8eef5;cursor:pointer}.clip-vertex.selected{fill:#176b8c}.preview-surface.can-pan:has(.clip-overlay.editable.adding){cursor:crosshair}.preview-surface.can-pan:has(.clip-overlay.editable.adding):active{cursor:grabbing}.empty-message{max-width:280px;margin:0;color:#617078;font-size:14px;text-align:center}.zoom-controls{position:absolute;right:10px;bottom:9px;display:flex;overflow:hidden;border:1px solid rgb(101 116 123 / 42%);border-radius:5px;background:#ffffffe5}.zoom-controls button{min-width:34px;height:32px;border:0;border-right:1px solid #d5dcdf;color:#43545c;background:transparent;font-size:15px;cursor:pointer}.zoom-controls button:last-child{border-right:0}.zoom-controls button:disabled{color:#98a2a7}.zoom-controls .zoom-value{min-width:58px;font-size:13px}.alignment-list-panel{min-width:0;padding:9px 12px}.composition-panel{display:grid;grid-template-rows:minmax(0,1fr);border-left:1px solid #cbd3d7;background:#d9dfe2}.export-settings{display:grid;gap:9px;padding:13px 14px 15px;color:#43545c;font-size:12px}.export-settings label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;white-space:nowrap}.export-settings select,.export-settings input{height:31px;border:1px solid #bfc9ce;border-radius:4px;color:#26323a;background:#fff;font:inherit}.export-settings select{min-width:124px;padding:2px 5px}.export-settings input{width:55px;padding:2px 5px}.export-margin-control{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px}.composition-canvas{display:grid;background-color:#d8dee1;background-image:linear-gradient(rgb(88 105 113 / 7%) 1px,transparent 1px),linear-gradient(90deg,rgb(88 105 113 / 7%) 1px,transparent 1px);background-size:22px 22px}.composition-surface{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:grab}.composition-surface:focus{outline:none}.composition-surface:active{cursor:grabbing}.composition-surface.tool-destination{cursor:crosshair}.composition-surface.tool-move{cursor:grab}.composition-surface.tool-move:active{cursor:grabbing}.composition-surface.tool-move.over-active-layer{cursor:move}.composition-image{position:absolute;top:0;left:0;display:block;transform-origin:0 0;pointer-events:none}.composition-split-preview,.moving-layer-preview{position:absolute;inset:0;pointer-events:none}.composition-split-preview{isolation:isolate}.moving-layer-preview{mix-blend-mode:multiply;will-change:transform}.output-page{position:absolute;background:#fff;box-shadow:0 3px 15px #28363c3d;pointer-events:none}.printable-area{position:absolute;border:1px dashed rgb(23 107 140 / 42%);pointer-events:none}.composition-overlay{position:absolute;inset:0;overflow:visible;pointer-events:none}.active-outline{fill:none;stroke:#176b8c;stroke-width:1px;stroke-dasharray:5 4}.layer-scale-handle{position:absolute;z-index:3;width:24px;height:24px;display:grid;place-items:center;border:2px solid #176b8c;border-radius:6px;background:#fff;box-shadow:0 1px 5px #192d373d;transform:translate(-50%,-50%);color:#176b8c;cursor:nwse-resize;touch-action:none}.layer-scale-handle:focus-visible{outline:2px solid #154c67;outline-offset:2px}.layer-scale-handle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.layer-scale-feedback{position:absolute;z-index:3;padding:2px 5px;border-radius:3px;background:#176b8c;color:#fff;font-size:12px;line-height:1.3;transform:translate(14px,-140%);pointer-events:none}.pick-crosshair{stroke:#c22d4f8c;stroke-width:1px}.residual-line{stroke:#c22d4f;stroke-width:1px;stroke-dasharray:3 2}.projected-point{stroke:#176b8c;stroke-width:1.5px}.destination-point{pointer-events:all;cursor:move}.destination-point circle,.align-point circle{fill:#ffffff8c;stroke:#c22d4f;stroke-width:2px;vector-effect:non-scaling-stroke}.destination-point path,.align-point path{stroke:#c22d4f;stroke-width:1px;vector-effect:non-scaling-stroke}.destination-point text{fill:#c22d4f;font-size:12px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}.pair-marker.selected .destination-point circle,.align-point.selected circle{fill:#c22d4f40;stroke-width:3px}.composition-coordinate{position:absolute;left:10px;bottom:9px;padding:5px 8px;border-radius:4px;color:#26323a;background:#ffffffe5;font:12px ui-monospace,monospace;pointer-events:none}.align-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.align-overlay.editable .align-point{pointer-events:all;cursor:move}.align-point text{fill:#c22d4f;font-size:12px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}.preview-surface.can-pan:has(.align-overlay.editable){cursor:crosshair}.preview-surface.can-pan:has(.align-overlay.editable):active{cursor:grabbing}.loupe{position:absolute;box-sizing:content-box;z-index:3;top:10px;right:10px;overflow:hidden;border:2px solid #26323a;border-radius:4px;background:#d9dde0;box-shadow:0 4px 16px #141e2340;pointer-events:none}.loupe.left{right:auto;left:10px}.loupe canvas{display:block;image-rendering:pixelated}.loupe-cross{position:absolute;inset:0}.loupe-cross path{stroke:#c22d4f;stroke-width:1px}.loupe-points{position:absolute;inset:0;pointer-events:none}.loupe-point circle{fill:none;stroke:#c22d4f;stroke-width:1.5px}.loupe-point path{fill:none;stroke:#c22d4f;stroke-width:1px}.loupe-point rect{fill:#c22d4f4d;stroke:#c22d4f;stroke-width:1px}.loupe-point.selected circle{stroke-width:2.5px}.loupe-point.selected path{stroke-width:2px}.loupe-point.selected rect{fill:#c22d4f73}.loupe-point text{fill:#c22d4f;font-size:11px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}.alignment-panel{width:100%;min-width:0;display:grid;gap:6px}.alignment-note{min-height:16px;color:#7a5412;font-size:12px;line-height:16px}.pair-table-wrap{min-width:0;max-width:100%;height:96px;overflow-x:hidden;overflow-y:auto;border:1px solid #d5dcdf;border-radius:4px;background:#fff}.pair-table{width:100%;min-width:0;max-width:100%;table-layout:fixed;border-collapse:collapse;font-size:12px}.pair-table td,.pair-table th{overflow:hidden;text-overflow:ellipsis}.pair-table tr>*:first-child{width:28px}.pair-table tr>*:nth-child(4){width:62px}.pair-table tr>*:last-child{width:30px}.pair-table th,.pair-table td{padding:3px 4px;border-bottom:1px solid #edf0f1;text-align:left;white-space:nowrap}.pair-table th{position:sticky;top:0;color:#617078;background:#f6f8f9;font-weight:600}.pair-table td{font-variant-numeric:tabular-nums}.pair-table tbody tr{cursor:pointer}.pair-table tbody tr.empty{color:#617078;cursor:default}.pair-table tbody tr.selected{background:#e6f2f6}.pair-menu-trigger{width:22px;height:22px;border:0;border-radius:3px;color:#526269;background:transparent;font-size:18px;line-height:18px;cursor:pointer}.pair-menu-trigger:hover,.pair-menu-trigger:focus-visible{background:#d7e9ef}.point-menu-backdrop{position:fixed;z-index:20;inset:0}.point-context-menu{position:fixed;min-width:176px;padding:4px;border:1px solid #c7d0d4;border-radius:5px;background:#fff;box-shadow:0 8px 24px #1a2b3233}.point-context-menu button{width:100%;min-height:30px;border:0;border-radius:3px;padding:5px 9px;color:#7e4d58;background:transparent;font-size:12px;text-align:left;cursor:pointer}.point-context-menu button:hover,.point-context-menu button:focus-visible{background:#f8e9ec}.point-context-menu button.add-vertex{color:#115f7e}.point-context-menu button.add-vertex:hover,.point-context-menu button.add-vertex:focus-visible{background:#e8f3f7}.alignment-message{position:absolute;z-index:4;left:10px;right:10px;bottom:50px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:7px 7px 7px 11px;border-radius:5px;box-shadow:0 4px 14px #28363c29;font-size:12px;line-height:1.5}.alignment-message button{flex:0 0 auto;width:22px;height:22px;border:0;border-radius:3px;color:inherit;background:transparent;cursor:pointer}.alignment-message.error{border:1px solid #d8a5ad;color:#6e2835;background:#fff5f6}.alignment-message.warning{border:1px solid #dfc08a;color:#6b4a10;background:#fdf7ea}.button.subtle.step{min-width:32px;padding:0 8px;font-size:14px}.button.subtle.active{border-color:#176b8c;color:#fff;background:#176b8c}.error-banner{position:absolute;z-index:8;top:68px;left:50%;width:min(560px,calc(100% - 32px));transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px 11px 15px;border:1px solid #d8a5ad;border-radius:6px;color:#6e2835;background:#fff5f6;box-shadow:0 5px 18px #3c23282e;font-size:14px}.error-banner button,.dialog-heading button{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:4px;color:inherit;background:transparent;cursor:pointer}.dialog-backdrop{position:absolute;z-index:10;inset:0;display:grid;place-items:center;background:#1e282d57}.page-dialog{width:min(430px,calc(100% - 40px));max-height:min(620px,calc(100% - 40px));overflow:hidden;border:1px solid #c8d0d4;border-radius:7px;background:#fff;box-shadow:0 18px 55px #141e2347}.dialog-heading{min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 17px;border-bottom:1px solid #d5dcdf}.dialog-heading h2{margin:0;font-size:17px}.page-list{display:grid;gap:7px;max-height:500px;overflow:auto;padding:12px}.page-list button{min-height:54px;display:flex;align-items:center;justify-content:space-between;border:1px solid #cad3d7;border-radius:5px;padding:10px 14px;color:#25343b;background:#fff;font-size:14px;text-align:left;cursor:pointer}.page-list button:hover{border-color:#72a5b7;background:#f1f8fa}.page-list span{color:#68767d;font-size:13px}.save-dialog-body{display:grid;gap:7px;padding:18px;color:#59676e;font-size:13px}.save-dialog-body strong{color:#1f3038;font-size:22px}.save-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid #d5dcdf;background:#f8fafb}.preflight-dialog-body{display:grid;gap:10px;padding:18px;color:#5f4b25;background:#fffaf0;font-size:13px}.preflight-dialog-body strong{color:#3b3324;font-size:16px}.preflight-dialog-body ul{display:grid;gap:6px;margin:0;padding-left:20px}@media(max-height:719px){body{overflow:auto}}