:root{--navy:#172a3b;--ink:#293744;--muted:#6c7580;--line:#dce0e3;--red:#ba4e39;--paper:#f5f0e5;--ui:#f5f6f7;--white:#fff;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:16px;color:var(--ink);background:var(--ui)}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #47789d;outline-offset:4px}button{touch-action:manipulation}a{color:inherit}button,fieldset{border:0}fieldset{padding:0;margin:0}legend{padding:0;margin:0 0 14px;font-size:.875rem;font-weight:600}input[type=range]{width:100%;accent-color:var(--navy);height:26px;cursor:pointer}input[type=color]{appearance:none;-webkit-appearance:none;padding:3px;border:1px solid var(--line);border-radius:50%;width:38px;height:38px;background:white;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}input[type=color]::-moz-color-swatch{border:0;border-radius:50%}[hidden]{display:none!important}
.app-header{max-width:1240px;margin:auto;height:100px;padding:0 42px;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;display:flex;align-items:center;gap:13px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:1.65rem;letter-spacing:.17em;font-weight:600}.brand small{display:block;font-family:-apple-system,sans-serif;letter-spacing:.18em;font-size:.75rem;font-weight:400;margin-top:5px;color:var(--muted)}.brand-mark{width:38px;height:44px;position:relative;display:flex;gap:5px;padding:7px 7px 0;background:var(--navy);border-radius:3px}.brand-mark i{display:block;width:3px;height:23px;background:#f9f5ed}.brand-mark i:nth-child(2){height:17px}.brand-mark b{position:absolute;bottom:6px;right:8px;width:4px;height:4px;border-radius:50%;background:#e98169}.quiet-button{padding:10px 0 10px 14px;display:flex;align-items:center;gap:7px;font-size:.875rem;background:none}.help-icon{width:19px;height:19px;border:1px solid currentColor;border-radius:50%;font-size:.75rem;display:grid;place-items:center}
.workspace{max-width:1240px;padding:18px 42px 24px;margin:auto;display:grid;grid-template-columns:380px minmax(0,1fr);gap:58px;align-items:start}.preview-area{grid-column:2;grid-row:1;min-width:0;padding-top:14px;position:sticky;top:20px}.preview-heading{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;color:var(--muted);letter-spacing:.04em;margin-bottom:17px}.preview-heading span:first-child{color:var(--ink);font-size:.875rem;font-weight:500}.paper-stage{min-height:544px;display:grid;place-items:center;padding:27px;background:#e9edef;border-radius:8px;position:relative}.paper{width:100%;max-width:488px;aspect-ratio:1;position:relative;background:var(--paper);box-shadow:0 3px 5px #172a3b0b,0 15px 30px #172a3b14;transition:background .2s}.paper canvas{display:block;width:100%;height:100%}#early-preview{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;writing-mode:vertical-rl;white-space:pre-line;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;letter-spacing:.12em;line-height:1.8;font-size:27px}.loading-note{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:.8125rem;background:#ffffffec;color:var(--ink);padding:8px 14px;border-radius:20px;white-space:nowrap}.layout-note{text-align:center;font-size:.8125rem;line-height:1.6;color:var(--muted);min-height:21px;margin:17px 0 0}.layout-note.warning{color:#995132}
.editor{grid-column:1;grid-row:1;min-width:0}.editor-heading{padding:9px 0 25px}.editor-heading h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500;font-size:1.45rem;letter-spacing:.08em;margin:0 0 8px}.editor-eyebrow{font-size:.8125rem;color:var(--muted);letter-spacing:.08em}.tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #cfd5da;gap:12px}.tabs button{position:relative;background:none;padding:14px 0;font-size:.9375rem;color:var(--muted);letter-spacing:.1em}.tabs button[aria-selected=true]{color:var(--navy);font-weight:600}.tabs button[aria-selected=true]:after{content:"";position:absolute;bottom:-1px;height:3px;background:var(--navy);left:12px;right:12px;border-radius:2px}.panel{padding:23px 0 0;min-height:377px}.field-heading{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;font-weight:500;margin-bottom:13px}.field-heading>span:last-child{font-size:.8125rem;font-weight:400;color:var(--muted)}textarea{width:100%;min-height:154px;display:block;resize:vertical;border:1px solid #cdd3d9;border-radius:7px;background:#fff;padding:16px;line-height:1.85;font-size:1rem;color:var(--ink)}textarea::placeholder,input::placeholder{color:#89919a}.field-hint{font-size:.8125rem;line-height:1.8;color:var(--muted);margin:10px 0 20px}.signature-field label{font-size:.875rem;display:block;margin-bottom:10px}.signature-field label span{margin-left:5px;font-size:.75rem;color:var(--muted)}.signature-field input{width:100%;padding:12px 14px;border:1px solid #cdd3d9;border-radius:7px;color:var(--ink);background:white;min-height:46px}.text-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 0;color:var(--muted);font-size:.75rem}.text-button{font-size:.8125rem;padding:8px 0;background:none;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}.save-area{margin-top:27px}.save-button{background:var(--navy);border-radius:7px;width:100%;min-height:54px;padding:15px 20px;color:#fff;font-size:1rem;letter-spacing:.05em;display:flex;justify-content:center;align-items:center;gap:10px;transition:background .15s}.save-button:hover{background:#2c485f}.save-button svg{width:21px;height:21px}.save-area p{font-size:.75rem;color:var(--muted);text-align:center;margin:11px 0 0;letter-spacing:.04em}
.font-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.font-card{border:1px solid var(--line);border-radius:7px;background:#fff;padding:11px 12px;text-align:left;min-height:88px;position:relative}.font-card[aria-pressed=true]{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:#f2f5f8}.font-card img{width:100%;height:28px;object-fit:contain;object-position:left center;display:block;margin:0 0 7px}.font-card .font-name{display:block;font-size:.8125rem}.font-card small{font-size:.75rem;color:var(--muted);display:block;margin-top:3px}.font-card[aria-pressed=true]:after{content:"✓";position:absolute;right:9px;bottom:9px;font-size:.875rem;color:var(--navy)}.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 11px;margin:18px 0 23px}.swatch{aspect-ratio:1;border-radius:50%;width:100%;border:1px solid #00000012;position:relative;min-width:32px}.swatch[aria-pressed=true]:after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--navy);border-radius:50%}.custom-color-row,.ink-row{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;gap:12px;padding:15px 0;border-top:1px solid var(--line)}.color-value{display:flex;align-items:center;gap:12px;font-size:.8125rem;color:var(--muted)}.ink-options{display:flex;gap:11px;margin-left:auto}.ink-options button{width:27px;height:27px;border-radius:50%;border:1px solid #0002}.ink-options button[aria-pressed=true]{outline:1.5px solid var(--navy);outline-offset:3px}.check-row{display:flex;align-items:center;gap:8px;font-size:.8125rem;margin-top:5px;padding:7px 0;cursor:pointer}.check-row input{accent-color:var(--navy);width:18px;height:18px;margin:0}.shape-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.shape-options button{border:1px solid var(--line);border-radius:7px;background:#fff;min-height:82px;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 5px;font-size:.8125rem}.shape-options button[aria-pressed=true]{border-color:var(--navy);background:#edf2f6;box-shadow:inset 0 0 0 1px var(--navy)}.shape-options small{display:block;color:var(--muted);font-size:.75rem;margin-top:6px}.shape-symbol{display:block;border:1.5px solid currentColor;width:22px;height:22px;border-radius:1px}.shape-symbol.portrait{width:20px;height:25px}.shape-symbol.story{width:16px;height:28px}.range-label{font-size:.875rem;display:flex;justify-content:space-between;margin-top:21px;margin-bottom:7px}.range-label output{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}.alignment-field{margin-top:21px}.segmented{display:grid;grid-template-columns:1fr 1fr;background:#e7ebef;padding:4px;border-radius:7px;gap:4px}.segmented button{border-radius:5px;padding:10px 5px;background:none;font-size:.875rem}.segmented button[aria-pressed=true]{background:white;box-shadow:0 1px 3px #0001}
.app-footer{max-width:1156px;margin:25px auto 0;padding:18px 0 26px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;color:var(--muted)}.app-footer>span{font-family:"Hiragino Mincho ProN",serif;letter-spacing:.1em}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:10;background:var(--navy);color:white;padding:13px 20px;border-radius:9px;font-size:.875rem;max-width:calc(100% - 32px);width:max-content;box-shadow:0 5px 20px #0002}dialog{border:0;border-radius:16px;padding:25px;max-width:480px;width:calc(100% - 28px);color:var(--ink);box-shadow:0 24px 100px #0004;max-height:calc(100dvh - 32px);overflow:auto}dialog::backdrop{background:#10223380;backdrop-filter:blur(3px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.dialog-header h2{font-family:"Hiragino Mincho ProN",serif;font-size:1.25rem;font-weight:500;letter-spacing:.05em;margin:0}.close-button{min-width:40px;height:40px;font-size:1.7rem;border-radius:50%;background:#f0f2f4;line-height:1}.steps{padding-left:24px;margin:0}.steps li{padding-left:4px;margin-bottom:21px}.steps li::marker{color:var(--red)}.steps b{font-size:.9375rem;font-weight:600}dialog p{font-size:.875rem;line-height:1.85}dialog .steps p{margin:6px 0}.install-guide{background:#edf2f6;border-radius:8px;padding:16px 18px}.install-guide h3{font-size:.9375rem;font-weight:600;margin:0 0 8px}.install-guide p{margin:0}.small-note{font-size:.75rem!important;color:var(--muted);line-height:1.8!important;margin:18px 0 0}.export-dialog{text-align:center}.export-dialog img{width:auto;max-width:100%;height:auto;max-height:52dvh;object-fit:contain;display:block;margin:auto;box-shadow:0 3px 16px #0001;-webkit-touch-callout:default;user-select:auto}.export-actions{display:grid;gap:10px}.secondary-button{display:block;text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:14px 12px;font-size:.875rem}.license-list{display:grid;gap:0}.license-list a{padding:13px 0;border-bottom:1px solid var(--line);font-size:.875rem;text-decoration:none}.license-list a span{font-size:.75rem;color:var(--muted);display:block;margin-top:5px}
.paper[data-shape=reference]{max-width:366px;aspect-ratio:3/4}
@media(min-width:900px){.paper[data-shape=portrait]{max-width:390px}.paper[data-shape=story]{max-width:275px}.paper-stage{height:544px}}
@media(max-width:1050px){.workspace{gap:32px;grid-template-columns:340px minmax(0,1fr);padding-left:28px;padding-right:28px}.app-header{padding-left:28px;padding-right:28px}.app-footer{margin-left:28px;margin-right:28px}.paper-stage{padding:22px}}
@media(max-width:759px){.app-header{height:76px;padding:0 22px}.brand{font-size:1.4rem;gap:10px}.brand small{font-size:.75rem;margin-top:3px}.brand-mark{width:32px;height:38px;padding:6px;gap:4px}.brand-mark i{width:3px;height:21px}.brand-mark b{right:5px;bottom:5px}.brand-mark i:nth-child(2){height:15px}.workspace{display:flex;flex-direction:column;padding:4px 20px 12px;gap:22px}.preview-area{position:static;width:100%;padding-top:0}.preview-heading{font-size:.75rem;margin-bottom:10px}.preview-heading span:first-child{font-size:.8125rem}.paper-stage{padding:18px;min-height:0;height:auto;max-height:none;border-radius:7px}.paper{max-width:270px}.paper[data-shape=portrait]{max-width:216px;aspect-ratio:4/5}.paper[data-shape=story]{max-width:152px;aspect-ratio:9/16}.layout-note{font-size:.75rem;margin-top:10px;min-height:19px}.editor{width:100%}.editor-heading{display:none}.tabs{gap:7px}.tabs button{padding:12px 0;font-size:.9375rem}.panel{padding-top:20px;min-height:0}.save-area{margin-top:22px}.save-button{min-height:52px}.font-grid{gap:9px}.font-card{min-height:84px}.color-grid{gap:15px}.swatch{max-width:46px;justify-self:center}.app-footer{margin:12px 20px 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}.text-footer{font-size:.75rem}.quiet-button{font-size:.8125rem}.loading-note{font-size:.75rem}.toast{bottom:calc(20px + env(safe-area-inset-bottom))}}
@media(max-width:359px){.workspace{padding-left:14px;padding-right:14px}.app-header{padding-left:16px;padding-right:16px}.shape-options{gap:6px}.shape-options button{gap:6px;font-size:.75rem}.paper{max-width:238px}}
.date-field{margin-top:19px}.date-field>label{display:block;font-size:.875rem;margin-bottom:10px}.date-field>label span{margin-left:5px;font-size:.75rem;color:var(--muted)}.date-controls{display:flex;gap:8px;min-width:0}.date-controls input{flex:1;min-width:0;width:0;max-width:100%;min-height:46px;padding:10px 12px;border:1px solid #cdd3d9;border-radius:7px;background:#fff;color:var(--ink);font-size:1rem;appearance:none;-webkit-appearance:none}.date-controls input::-webkit-date-and-time-value{text-align:left}.date-controls button{flex:none;border:1px solid #cdd3d9;background:#fff;border-radius:7px;min-width:48px;min-height:46px;padding:9px;font-size:.875rem}.date-controls button:hover{background:#edf2f6}.signature-hint{margin:10px 0 0}
.reference-preset{display:block;width:100%;text-align:left;padding:16px 17px;border:1px solid #b5c4d0;background:#edf2f6;border-radius:7px;color:var(--navy)}.reference-preset>span{font-size:.9375rem;font-weight:600}.reference-preset small{display:block;margin-top:7px;font-size:.75rem;color:var(--muted)}.reference-preset:hover{background:#e3ebf1}.preset-hint{font-size:.75rem;margin:9px 0 22px}.shape-options{grid-template-columns:repeat(2,1fr)}.shape-options button{min-height:70px}.shape-symbol.reference{width:20px;height:27px}.top-line-control{margin-top:18px;min-height:44px}.line-sample{width:34px;height:1px;background:currentColor;margin-left:auto}
@media(max-width:759px){.paper[data-shape=reference]{max-width:202.5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}