:root{--chrome:#f0f0f0;--content:#fff;--text:#1b1b1b;--text-soft:#5a5a5a;--instruction:#1e395b;--header-top:#fff;--header-bottom:#dce7f3;--header-line:#c3d1e0;--line:#d6d6d6;--control-line:#acacac;--control-top:#fdfdfd;--control-bottom:#e6e6e6;--hover:#e5f1fb;--hover-line:#7eb4ea;--selected:#cce8ff;--selected-line:#99d1ff;--default-line:#3a8be0;--link:#06c;--focus:#3a8be0;--preview:#f7f7f7;--paper:#fff;--paper-edge:#c8c8c8;--cut:#9a9a9a;--notice:#ffffe1;--notice-line:#e6db9a;color:var(--text);background:var(--chrome);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif;font-size:15px;line-height:1.4}@media (prefers-color-scheme:dark){:root{--chrome:#202124;--content:#2a2b2e;--text:#e8e8e8;--text-soft:#a8a8a8;--instruction:#b9d3f2;--header-top:#2c3440;--header-bottom:#232a33;--header-line:#3a4553;--line:#3a3b3e;--control-line:#55575b;--control-top:#3a3b3f;--control-bottom:#313236;--hover:#2f3c4c;--hover-line:#4f7fb2;--selected:#284866;--selected-line:#3f73a6;--default-line:#5a9ce6;--link:#8cbcf2;--focus:#5a9ce6;--preview:#18191b;--paper-edge:#000;--notice:#3a3620;--notice-line:#6b6233;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--chrome);margin:0}button,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.dialog{grid-template-rows:auto auto auto 1fr auto auto;height:100%;min-height:560px;display:grid}.dialog-header{padding-block:14px 13px;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px));background:linear-gradient(var(--header-top), var(--header-bottom));border-bottom:1px solid var(--header-line)}.dialog-header h1{color:var(--instruction);margin:0;font-size:1.35rem;font-weight:400}.toolbar,.options-bar{padding-block:10px;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px));background:var(--chrome);flex-wrap:wrap;align-items:center;gap:10px 28px;display:flex}.toolbar{border-bottom:1px solid var(--line)}.options-bar{border-top:1px solid var(--line)}.toolbar-end,.options-end{margin-left:auto}.options-end{align-items:center;gap:16px;display:flex}.field{align-items:center;gap:8px;display:flex}.field>span{color:var(--text);white-space:nowrap}.dialog-body{background:var(--content);grid-template-columns:minmax(0,1fr) 208px;min-height:0;display:grid}.dialog-footer{padding-block:12px;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px));padding-bottom:max(12px, env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--chrome);justify-content:flex-end;gap:8px;display:flex}.info-bar{border-bottom:1px solid var(--notice-line);background:var(--notice);margin:0;padding:8px 20px}.button{border:1px solid var(--control-line);background:linear-gradient(var(--control-top), var(--control-bottom));cursor:pointer;border-radius:3px;justify-content:center;align-items:center;gap:6px;min-width:88px;min-height:34px;padding:0 14px;display:inline-flex}.button:hover:not(:disabled){border-color:var(--hover-line);background:var(--hover)}.button:active:not(:disabled),.button[aria-checked=true]{border-color:var(--selected-line);background:var(--selected)}.button:disabled{cursor:default;color:var(--text-soft);opacity:.55}.button.default{border-color:var(--default-line);box-shadow:inset 0 0 0 1px var(--default-line)}.button.large{min-height:44px;padding:0 22px;font-size:1.05rem}.button.icon{width:36px;min-width:36px;padding:0}.button.icon svg{width:18px;height:18px}.button-group{display:inline-flex}.button-group .button{border-radius:0;min-width:0}.button-group .button+.button{margin-left:-1px}.button-group .button:first-child{border-radius:3px 0 0 3px}.button-group .button:last-child{border-radius:0 3px 3px 0}.button-group .button[aria-checked=true]{position:relative}.button-row{gap:4px;display:inline-flex}.select{border:1px solid var(--control-line);background:var(--content);border-radius:3px;min-width:120px;min-height:34px;padding:0 8px}.link-button{color:var(--link);cursor:pointer;background:0 0;border:0;padding:0}.link-button:hover:not(:disabled){text-decoration:underline}.link-button:disabled{color:var(--text-soft)}.checkbox{white-space:nowrap;cursor:pointer;align-items:center;gap:8px;display:inline-flex}.checkbox input{width:18px;height:18px;accent-color:var(--focus);margin:0}.checkbox:has(input:disabled){color:var(--text-soft);cursor:default}.stepper{align-items:center;gap:4px;display:inline-flex}.number-input{border:1px solid var(--control-line);background:var(--content);width:64px;min-height:34px;font:inherit;color:inherit;border-radius:3px;padding:0 6px}.number-input:disabled{color:var(--text-soft);opacity:.55}.stepper output{text-align:center;font-variant-numeric:tabular-nums;min-width:34px}.adjust{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.preview{background:var(--preview);flex-direction:column;min-width:0;min-height:0;display:flex}.page-area{flex:1;place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.preview-controls{justify-content:center;padding:4px 16px 14px;display:flex}.page{background:var(--paper);box-shadow:0 0 0 1px var(--paper-edge), 0 2px 6px #0000001f;outline-offset:4px;position:relative}.page-empty{flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex;position:absolute;inset:0}.drop-hint{color:var(--text-soft)}.is-drop-target .page{outline:2px dashed var(--focus)}.page-piece{outline:1px dashed var(--cut);cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute}.page-piece.is-selected{z-index:1;outline:2px solid var(--focus);outline-offset:2px;cursor:default}.page-piece.is-editable{cursor:grab}.page-piece.is-editable:active{cursor:grabbing}.page-piece-upright{position:absolute;inset:0}.photo-crop{background:var(--paper);position:absolute;inset:0;overflow:hidden}.photo-crop img,.page-ghost{-webkit-user-select:none;user-select:none;pointer-events:none;max-width:none;position:absolute}.page-ghost{opacity:.35}.cut-off{--rest:0;pointer-events:none;position:absolute}.cut-off.is-shown{--rest:.3}.cut-off img{max-width:none;opacity:var(--rest);position:absolute}.cut-off.is-intro img{animation:1s ease-in-out both cut-off-intro}@keyframes cut-off-intro{0%,35%{opacity:1}to{opacity:var(--rest)}}.page-nav{z-index:2;color:var(--text-soft);white-space:nowrap;align-items:center;gap:10px;display:flex;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.round-button{border:1px solid var(--control-line);background:linear-gradient(var(--control-top), var(--control-bottom));cursor:pointer;border-radius:50%;width:26px;height:26px;padding:0;line-height:1}.round-button:disabled{opacity:.4;cursor:default}.size-panel{border-left:1px solid var(--line);background:var(--content);flex-direction:column;min-height:0;display:flex}.size-list{flex-direction:column;flex:1;gap:4px;min-height:0;padding:8px;display:flex;overflow-y:auto}.size-panel-footer{border-top:1px solid var(--line);background:var(--chrome);padding:10px 12px}.size-fields{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.size-fields>span:first-child{flex-basis:100%}.size-fields .number-input{flex:1;width:0;min-width:0}.size-option{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:3px;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;display:flex}.size-option:hover{border-color:var(--hover-line);background:var(--hover)}.size-option[aria-checked=true]{border-color:var(--selected-line);background:var(--selected)}.size-sheet-area{justify-content:center;align-items:center;width:100px;height:100px;display:flex}.size-sheet{background:var(--paper);height:96px;box-shadow:0 0 0 1px var(--paper-edge), 0 1px 3px #00000026;display:block;position:relative}.size-sheet.is-landscape{width:96px;height:auto}.size-sheet img{object-fit:cover;max-width:none;position:absolute}.size-label{font-size:.93rem}@media (width<=760px){.dialog{height:auto;min-height:100%;padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));flex-direction:column;display:flex}.dialog-body{flex-direction:column;display:flex}.preview{height:clamp(340px,58vh,560px)}.size-panel{border-left:0;border-top:1px solid var(--line)}.size-list{flex-direction:row;overflow:auto hidden}.size-fields>span:first-child{flex-basis:auto}.size-fields .number-input{flex:none;width:72px}.size-option{flex:none}.size-sheet-area{width:88px;height:88px}.size-sheet{height:84px}.size-sheet.is-landscape{width:84px}.toolbar-end,.options-end{margin-left:0}.dialog-footer{z-index:10;position:fixed;bottom:0;left:0;right:0}.dialog-footer .button{flex:1}.button,.select{min-height:42px}.button.icon{width:42px}}@media (pointer:coarse){.drop-hint{display:none}}.dev-panel{z-index:50;top:calc(8px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));color:#e9ebee;background:#121417;border-radius:10px;flex-direction:column;gap:6px;padding:12px 14px;font:13px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;position:fixed;box-shadow:0 6px 24px #00000059}.dev-panel summary{cursor:pointer;font-weight:700}.dev-panel label{cursor:pointer;align-items:center;gap:8px;display:flex}.dev-panel select{font:inherit;color:#111;background:#fff}.dev-panel small{color:#a4abb5;max-width:200px}.dev-panel fieldset{border:0;border-top:1px solid #2c3036;flex-direction:column;gap:5px;margin:0;padding:6px 0 0;display:flex}.dev-panel legend{color:#8f98a3;text-transform:uppercase;letter-spacing:.06em;padding:0 0 4px;font-size:11px}.crop-stage{touch-action:none;-webkit-user-select:none;user-select:none;flex:1;place-items:center;min-height:0;display:grid;position:relative;overflow:hidden}.crop-stage.is-editable{cursor:grab}.crop-stage.is-editable:active{cursor:grabbing}.crop-window{position:relative}.crop-photo{pointer-events:none;max-width:none;position:absolute}.crop-shade{pointer-events:none;position:absolute;inset:0}.experiment-frame-crop{--wall:#e7e4df}.experiment-frame-crop .crop-window,.experiment-frame-crop.real-size-print{--moulding:calc(var(--ppi) * .7);--lip:calc(var(--ppi) * .15)}@media (prefers-color-scheme:dark){.experiment-frame-crop{--wall:#2b2a28}}.experiment-frame-crop.crop-stage{background:var(--wall)}@property --shade{syntax:"<number>";inherits:true;initial-value:1}.experiment-frame-crop{--shade:1;--shade-rest:1}.experiment-frame-crop .crop-shade{box-shadow:0 0 0 200vmax color-mix(in srgb, var(--wall) calc(var(--shade) * 100%), transparent);outline:none}.experiment-frame-crop.shows-cut-off{--shade:.75;--shade-rest:.75}.experiment-frame-crop.is-panning{--shade:.6}.experiment-frame-crop.is-intro .crop-shade{animation:1s ease-in-out both frame-intro}@keyframes frame-intro{0%,35%{--shade:0}to{--shade:var(--shade-rest)}}.experiment-frame-crop .crop-shade:before{content:"";inset:calc(var(--lip) - var(--moulding));border:var(--moulding) solid var(--frame-colour,#1d1d1f);border-radius:2px;position:absolute;box-shadow:0 14px 30px #00000047,0 2px 4px #00000040,inset 0 0 0 1px #00000059,inset 0 3px 8px #00000059}.experiment-frame-crop.frame-black{--frame-colour:#1d1d1f}.experiment-frame-crop.frame-white{--frame-colour:#f6f5f2}.experiment-frame-crop.frame-wood .crop-shade:before{border-image:linear-gradient(135deg,#7b4b28,#b27d4d 35%,#8d5a33 60%,#6d4021) 1}.real-size{z-index:40;background:var(--bg);flex-direction:column;display:flex;position:fixed;inset:0;overflow:auto}.real-size-bar{z-index:2;padding-block:12px;padding-left:var(--gutter-left);padding-right:var(--gutter-right);justify-content:flex-start;align-items:center;gap:16px;display:flex;position:sticky;top:0}.real-size-calibrate{padding-block:24px;padding-left:var(--gutter-left);padding-right:var(--gutter-right);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;display:flex}.real-size-calibrate p{max-width:34ch;margin:0}.real-size-calibrate input{width:min(420px,100%)}.real-size-card{border:2px solid var(--accent);background:var(--accent-soft);border-radius:10px}.real-size-stage{flex:1;place-items:center;min-width:max-content;padding:64px;display:grid}.real-size-print{box-shadow:0 0 0 1px var(--cut), 0 8px 24px #0000002e;position:relative}.real-size-print.experiment-frame-crop .crop-shade,.photo-overlay{pointer-events:none;position:absolute;inset:0}.experiment-frame-crop .photo-overlay{--outside:calc(var(--moulding) - var(--lip))}.photo-overlay{--outside:0px}.size-mark{color:#4a5562;white-space:nowrap;justify-content:center;align-items:center;font-size:11px;line-height:1;display:flex;position:absolute}.size-mark:before{content:"";border:0 solid;position:absolute}.size-mark>span{background:#fff;border-radius:3px;padding:2px 5px;position:relative;box-shadow:0 0 0 1px #0000001f}.size-mark.is-top{left:50%;top:calc(-1 * var(--outside) - 18px);border-left:1px solid;border-right:1px solid;height:12px;transform:translate(-50%)}.size-mark.is-top:before{border-top-width:1px;top:50%;left:0;right:0}.size-mark.is-left{top:50%;left:calc(-1 * var(--outside) - 18px);border-top:1px solid;border-bottom:1px solid;width:12px;transform:translateY(-50%)}.size-mark.is-left:before{border-left-width:1px;top:0;bottom:0;left:50%}.size-mark.is-left>span{writing-mode:vertical-rl;transform:rotate(180deg)}.shape-switch{top:calc(-1 * var(--outside) - 34px);right:calc(-1 * var(--outside) - 34px);border:1px solid var(--control-line,#acacac);color:#1b1b1b;cursor:pointer;pointer-events:auto;background:#fff;border-radius:50%;place-items:center;width:30px;height:30px;padding:0;display:grid;position:absolute;box-shadow:0 1px 3px #0003}.shape-switch:hover{border-color:var(--hover-line,#7eb4ea);background:var(--hover,#e5f1fb)}.has-move-cursor.is-editable,.has-move-cursor.is-editable:active{cursor:move}.resize-handle{border:1.5px solid var(--focus,#3a8be0);pointer-events:auto;touch-action:none;background:#fff;border-radius:2px;width:11px;height:11px;position:absolute;transform:translate(-50%,-50%)}.resize-preview{border:1.5px dashed var(--focus,#3a8be0);background:#3a8be014;justify-content:center;align-items:flex-end;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.resize-preview>span{background:var(--focus,#3a8be0);color:#fff;white-space:nowrap;border-radius:999px;margin-bottom:8px;padding:3px 9px;font-size:12px}