:root{--ink:#202120;--navy:#202120;--muted:#737570;--line:#e7e9e2;--ui:#f7f7f5;--app-height:100dvh;--visual-top:0px;--header-h:84px;--dock-h:112px;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;background:var(--ui);-webkit-font-smoothing:antialiased}
html,body{margin:0;width:100%;height:100%;overflow:hidden}button{touch-action:manipulation}button:disabled{opacity:.38}button,a,input,textarea{transition:background .16s,color .16s,border-color .16s}svg{display:block;flex:none}
.app-header{position:fixed;z-index:6;top:var(--visual-top);left:0;width:100%;max-width:none;height:var(--header-h);padding:0 36px}.brand{gap:12px;font-family:inherit;font-size:1.3rem;font-weight:650;letter-spacing:.04em}.brand-mark{width:24px;height:29px;padding:2px 0 0;gap:4px;background:none;border-radius:0;align-items:flex-start}.brand-mark i{width:2px;height:24px;background:var(--ink);border-radius:2px}.brand-mark i:nth-child(2){height:17px}.brand-mark b{right:4px;bottom:0;width:4px;height:4px;background:#de684b}.header-actions{display:flex;align-items:center;gap:16px}.icon-button{display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border-radius:50%}.icon-button:hover{background:#ebede8}.help-icon{width:20px;height:20px;border:1.4px solid #92948e;color:var(--muted);font-size:.75rem}.save-button{min-height:50px;border-radius:14px;background:var(--ink);font-size:.9375rem;font-weight:550;letter-spacing:0;gap:9px;padding:12px 20px}.save-button:hover{background:#3c3e3a}.header-save{width:auto;min-width:100px;min-height:44px;padding:10px 18px;border-radius:24px;font-size:.875rem}.header-save svg{width:19px;height:19px}
.workspace{position:fixed;top:calc(var(--visual-top) + var(--header-h));left:32px;right:32px;height:calc(var(--app-height) - var(--header-h) - var(--dock-h));max-width:1440px;margin:auto;padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:28px;align-items:stretch}.editor-open .workspace{grid-template-columns:minmax(0,1fr) 360px}.preview-area{position:static;grid-column:1;grid-row:1;min-height:0;min-width:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border:0;background:none}.paper-stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;width:100%;min-height:0;height:auto;max-height:none;padding:24px;background:none;border-radius:0}.paper,.paper[data-shape]{flex:none;width:min(70%,420px);max-width:none;height:auto;aspect-ratio:var(--paper-ratio,.75);background:#f5f0e5;box-shadow:0 2px 4px #171a1710,0 20px 60px -20px #171a1730;transition:width .28s cubic-bezier(.2,.7,.2,1);border-radius:1px}.paper canvas{border-radius:inherit}.loading-note{bottom:18px;border-radius:30px;padding:9px 16px;font-size:.75rem;background:#fffffff2;box-shadow:0 2px 12px #00000008;max-width:calc(100% - 20px);white-space:normal;text-align:center}
.canvas-caption{display:flex;align-items:center;justify-content:center;gap:20px;min-height:38px;color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}.edit-shortcut{display:flex;align-items:center;gap:6px;min-height:40px;font-size:.8125rem;color:var(--ink);padding:8px 12px;border-radius:24px;background:white}.edit-shortcut svg{width:14px;height:14px}.editor-open .edit-shortcut{display:none}.layout-note{min-height:0;margin:4px 0 0;font-size:.75rem;line-height:1.5;max-width:90%}.layout-note:empty{display:none}
.editor{display:none;grid-column:2;grid-row:1;min-width:0;min-height:0;width:auto;margin:0;overflow:hidden;background:white;border:1px solid #e5e6e180;border-radius:26px;box-shadow:0 4px 24px #22251c04}.editor-open .editor{display:flex;flex-direction:column;animation:reveal-panel .24s cubic-bezier(.2,.7,.2,1)}.inspector-heading{display:flex;align-items:center;justify-content:space-between;flex:none;padding:14px 18px 12px 24px}.inspector-heading h1{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:.03em}.close-button{display:grid;place-items:center;flex:none;min-width:40px;width:40px;height:40px;font-size:1.6rem;font-weight:300;background:#f3f4f1}.panel-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior-y:contain;padding:2px 24px 26px;scrollbar-width:thin;scrollbar-color:#d9dcd4 transparent;-webkit-overflow-scrolling:touch}.panel{min-height:0;min-width:0;padding:0}.field-heading{font-weight:500;margin:3px 0 12px;font-size:.875rem}.field-heading>span:last-child{font-size:.75rem}.field-hint{font-size:.8125rem;line-height:1.7;margin:12px 0 22px}.text-footer{margin-top:20px;font-size:.75rem}.text-button{min-height:40px}
.tool-dock{position:fixed;z-index:8;top:auto;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:320px;max-width:calc(100% - 28px);height:76px;padding:6px;border:1px solid #ffffffd9;border-radius:26px;background:#ffffffed;box-shadow:0 2px 8px #22251a05,0 12px 38px -8px #22251a23}.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:4px;border-radius:20px;font-size:.75rem;font-weight:500;letter-spacing:0;color:#737570}.tabs button>svg{width:23px;height:23px}.tabs button[aria-selected=true]{background:var(--ink);color:white;font-weight:500}.tabs button[aria-selected=true]:after{display:none}.tabs button:hover:not([aria-selected=true]){background:#f1f3ee}.font-tool-icon{height:23px;font-family:Georgia,"Times New Roman",serif;font-size:24px;line-height:23px;letter-spacing:-1.5px}
textarea{min-height:156px;border:0;border-radius:14px;background:#f5f6f2;padding:16px;font-size:1rem;line-height:1.8}.ruby-tools{justify-content:space-between;gap:8px;margin:10px 0 24px}.ruby-tools>span{font-size:.75rem}.ruby-button{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border:0;background:#f5f6f2;border-radius:12px;font-size:.8125rem}.ruby-symbol{font-size:8px;text-align:center;line-height:1}.ruby-symbol small{display:block;font-size:14px;margin-top:2px}.signature-field input,.date-controls input,.ruby-input{min-height:48px;border-color:var(--line);border-radius:12px;padding:11px 13px;font-size:1rem}.date-controls{gap:6px}.date-controls button{border:0;border-radius:12px;min-width:46px;background:#f3f5ef;font-size:.8125rem}.signature-hint{margin-bottom:0}
.font-groups{gap:24px}.font-group h3{margin:6px 0;font-size:.75rem;color:var(--muted);font-weight:500;letter-spacing:0}.font-grid{grid-template-columns:1fr;gap:3px}.font-card{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:70px;padding:12px;border:0;border-radius:14px;background:none}.font-card:hover{background:#f7f8f5}.font-card[aria-pressed=true]{border:0;box-shadow:none;background:#f0f3eb}.font-copy{min-width:0}.font-card .font-name{font-size:.875rem;line-height:1.55;font-weight:500;padding:0}.font-card small{font-size:.75rem;line-height:1.5;margin-top:3px;padding:0}.font-card img{width:114px;max-width:42%;height:28px;object-fit:contain;object-position:right center;flex:none;margin:0}.font-card[aria-pressed=true]:after{content:'';width:4px;height:4px;background:#687755;border-radius:50%;left:3px;right:auto;bottom:auto;top:50%}
.color-grid{gap:12px 8px;margin:16px 0 24px}.swatch{max-width:40px;min-width:28px;justify-self:center}.swatch[aria-pressed=true]:after{inset:-4px}.custom-color-row,.ink-row{padding:16px 0;gap:10px}.color-value{gap:8px;font-size:.75rem}.ink-options{gap:8px}.ink-options button{width:28px;height:28px}.photo-section{padding:22px 0}.photo-button{border:0;border-radius:14px;min-height:48px;background:#f1f3ed}.photo-button:hover{background:#e9ede1}.photo-status{font-size:.75rem}.photo-preview-row img{border:0;border-radius:10px}.photo-hint{font-size:.8125rem}
.range-label{align-items:baseline;gap:10px;margin:24px 0 8px}.range-label output{font-size:.875rem}input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:32px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:9px;background:linear-gradient(to right,var(--ink) var(--range-progress,50%),#e8ebe3 var(--range-progress,50%))}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;background:white;border:1px solid #e7e9e1;border-radius:50%;box-shadow:0 2px 6px #22251b29}input[type=range]::-moz-range-track{height:4px;background:#e8ebe3;border-radius:9px}input[type=range]::-moz-range-progress{height:4px;background:var(--ink)}input[type=range]::-moz-range-thumb{width:22px;height:22px;border:1px solid #e7e9e1;border-radius:50%;background:white;box-shadow:0 2px 6px #22251b29}.layout-size-control{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px}.layout-size-control .range-label{margin-top:0}.layout-size-control output{font-size:2rem;line-height:1.2;color:var(--ink);font-weight:550;letter-spacing:-.05em}.check-row{justify-content:space-between;gap:12px;min-height:46px;font-size:.875rem}.check-row input{appearance:none;-webkit-appearance:none;position:relative;order:2;flex:none;width:38px;height:23px;margin:0;border:0;border-radius:20px;background:#dfe3d9}.check-row input:before{content:'';position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:white;box-shadow:0 1px 4px #0002;transition:transform .18s}.check-row input:checked{background:var(--ink)}.check-row input:checked:before{transform:translateX(15px)}.single-column-control{margin-top:12px}.single-column-hint{margin:0;font-size:.75rem}
.shape-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.shape-options button{flex-direction:column;gap:9px;min-width:0;min-height:98px;padding:12px 1px;border:0;border-radius:14px;background:#f5f6f2;font-size:.75rem}.shape-options button[aria-pressed=true]{background:var(--ink);color:white;box-shadow:none}.shape-options small{margin-top:3px;font-size:.75rem;color:inherit;opacity:.6}.shape-symbol{border-width:1.3px;border-radius:2px}.top-decoration-field{margin-top:26px}.decoration-options{gap:5px}.decoration-options button{min-height:70px;border:0;border-radius:12px;background:#f5f6f2;padding:8px 1px;font-size:.75rem}.decoration-options button[aria-pressed=true]{background:var(--ink);color:white;box-shadow:none}.decoration-icon{height:24px}.decoration-icon:before{width:25px}.decoration-icon.none:before{color:inherit}.decoration-icon.dots:before{width:3px}.decoration-icon.diamond:before{width:8px;height:8px}.alignment-field{margin-top:24px}.segmented{border-radius:13px;background:#f1f3ed}.segmented button{min-height:40px;border-radius:10px;font-size:.8125rem}.segmented button[aria-pressed=true]{box-shadow:0 2px 4px #22251b09}.reference-preset{margin-top:24px;padding:16px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none}.reference-preset>span{font-size:.875rem;font-weight:400}.reference-preset:hover{background:none}
dialog{top:calc(var(--visual-top) + var(--app-height) / 2);bottom:auto;left:0;right:0;transform:translateY(-50%);margin:0 auto;width:calc(100% - 24px);max-height:calc(var(--app-height) - 24px);overscroll-behavior:contain;border-radius:26px;padding:24px;box-shadow:0 24px 100px #0003}dialog::backdrop{background:#292c2650;backdrop-filter:blur(5px)}.dialog-header h2{font-family:inherit;font-size:1.125rem;font-weight:600;letter-spacing:0}.steps li::marker{color:var(--muted)}.steps p{color:var(--muted)}.install-guide{background:#f4f6f0;border-radius:16px}.secondary-button{border:0;border-radius:14px;background:#f2f4ee}.export-dialog img{max-height:calc(var(--app-height) * .5)}.photo-dialog{padding:18px;max-height:calc(var(--app-height) - 20px)}.photo-edit-stage{background:#f2f4ee;border-radius:14px}#photo-artwork{width:min(100%,calc((var(--app-height) - 260px) * var(--paper-ratio,.75)))}.photo-zoom-actions>button{border:0;border-radius:12px;background:#f2f4ee}.toast{z-index:30;bottom:calc(var(--dock-h) + 12px);border-radius:16px;background:#292b27f5;font-size:.875rem;line-height:1.6}
.typing-toolbar{top:var(--typing-toolbar-top);left:calc(var(--visual-left,0px) + 10px);width:calc(var(--visual-width,100%) - 20px);height:52px;padding:4px 6px 4px 16px;border:1px solid #e5e8de;border-radius:18px;background:#fffffff5;box-shadow:0 3px 18px #22251b12}.typing-toolbar button{min-height:42px;border-radius:14px;font-size:.875rem}.typing-active .tool-dock{visibility:hidden}
@keyframes reveal-panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:900px){.editor-open .tool-dock{left:calc((100% - 388px) / 2)}}
@media(max-width:899px){
 :root{--header-h:calc(68px + env(safe-area-inset-top));--dock-h:calc(102px + env(safe-area-inset-bottom))}html{scroll-padding:0}.app-header{padding:env(safe-area-inset-top) 20px 0}.brand{font-size:1.1875rem;gap:10px}.header-actions{gap:8px}.header-save{min-width:82px;padding:10px 15px}.workspace{left:14px;right:14px;gap:10px;padding:0;display:grid}.editor-open .workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(80px,1fr) minmax(0,min(44dvh,380px))}.preview-area{padding:0;position:static;border:0}.paper-stage{padding:12px 6px}.canvas-caption{min-height:32px;gap:12px}.editor{grid-column:1;grid-row:2;margin:0;width:100%;border-radius:24px}.inspector-heading{padding:10px 14px 6px 20px}.inspector-heading h1{font-size:1rem}.panel-scroll{padding:2px 20px 24px}.tool-dock{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));width:316px;height:74px;padding:6px;border-radius:25px}.tabs button{padding:4px;border-radius:19px;font-size:.75rem}.editor-open .canvas-caption{min-height:26px}.editor-open .layout-note:not(.warning){display:none}.font-card{min-height:70px}.font-card img{width:112px}.shape-options button{font-size:.75rem}.decoration-options{gap:4px}.photo-dialog{padding:14px}
}
@media(max-width:359px){.app-header{padding-left:16px;padding-right:16px}.header-actions{gap:2px}.workspace{left:10px;right:10px}.panel-scroll{padding-left:16px;padding-right:16px}.inspector-heading{padding-left:16px}.color-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.font-card img{width:96px}.brand{font-size:1.0625rem}.brand-mark{width:22px}}
@media(max-width:899px) and (max-height:500px) and (orientation:landscape){:root{--header-h:52px;--dock-h:86px}.editor-open .workspace{grid-template-columns:minmax(0,1fr) minmax(280px,46%);grid-template-rows:minmax(0,1fr)}.editor{grid-column:2;grid-row:1}.editor-open .tool-dock{left:27%;width:270px;height:66px}.paper-stage{padding:4px}.editor-open .canvas-caption{display:none}.inspector-heading{padding-top:6px;padding-bottom:2px}}
@media(max-width:1024px){
 .keyboard-open{--header-h:44px;--dock-h:64px;scroll-padding:0}.keyboard-open .app-header{padding-top:0}.keyboard-open .brand{font-size:1rem}.keyboard-open .brand-mark{transform:scale(.8)}.keyboard-open .header-save{min-height:34px;height:34px;padding:6px 14px}.keyboard-open .icon-button{height:34px}.keyboard-open .workspace,.keyboard-open .editor-open .workspace{padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:64px minmax(0,1fr);gap:6px}.keyboard-open .preview-area{position:static;padding:0;background:none}.keyboard-open .canvas-caption,.keyboard-open .layout-note{display:none}.keyboard-open .paper-stage{padding:2px}.keyboard-open .paper,.keyboard-open .paper[data-shape]{width:45px;max-width:none;height:auto}.keyboard-open .editor{grid-column:1;grid-row:2;margin:0;width:100%;border-radius:19px}.keyboard-open .inspector-heading{padding:4px 12px 2px 16px}.keyboard-open .inspector-heading h1{font-size:.9375rem}.keyboard-open .close-button{width:34px;min-width:34px;height:34px}.keyboard-open .panel-scroll{padding:0 16px 18px}.keyboard-open #text-input{min-height:104px;height:104px;max-height:180px}.keyboard-open .field-heading{margin-bottom:6px}.keyboard-open .ruby-tools{margin-bottom:12px}.keyboard-open dialog[open]{top:calc(var(--visual-top) + var(--app-height) / 2);bottom:auto;max-height:calc(var(--app-height) - 16px);margin:0 auto}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root{--header-h:max(84px,4rem)}.app-header{flex-wrap:wrap;align-content:center;column-gap:12px;row-gap:4px}.brand,.header-save,.tabs button>span{white-space:nowrap}.brand,.header-actions{flex-shrink:0}.header-actions{margin-left:auto}.tabs button{padding-left:0;padding-right:0;line-height:1.2}
@media(max-width:899px){:root{--header-h:calc(max(68px,4rem) + env(safe-area-inset-top))}}
@media(max-width:899px) and (max-height:500px) and (orientation:landscape){:root{--header-h:max(52px,3.25rem)}}
@media(max-width:1024px){.keyboard-open{--header-h:44px}.keyboard-open .header-actions{display:none}}