:root{--ink:#494c43;--muted:#707367;--line:#dfdfd3;--paper:#fffcf8;--accent:#66775b;--pink:#e8c9c7;--green:#cdd9bc;--blue:#cbdde2;font-family:'Zen Maru Gothic',sans-serif;color:var(--ink);background:#fff3e8;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-size:16px;line-height:1.85}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:5px}button,a.button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button,input,select,textarea{max-width:100%}button{line-height:1.6}h1,h2,h3,p{margin-top:0}h2{font-size:22px;font-weight:400;line-height:1.65}h3{font-size:17px;font-weight:400}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #8a9c7b;outline-offset:4px}[hidden]{display:none!important}.skip{position:absolute;top:-100px;left:16px;z-index:5;background:white;padding:12px}.skip:focus{top:10px}.site-header{max-width:1040px;margin:auto;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:16px}.site-header a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-size:14px}.site-header .brand{font-size:21px;letter-spacing:.07em;gap:6px}.brand span{font-size:14px}main{max-width:784px;margin:auto;padding:0 32px}.hero{text-align:center;padding:38px 0 26px}.eyebrow{font-family:'Zen Maru Gothic',sans-serif;font-size:14px;letter-spacing:.18em;color:var(--accent);margin-bottom:12px}.hero h1{font-family:'Klee One',serif;font-size:38px;font-weight:400;line-height:1.5;letter-spacing:.06em;margin-bottom:16px}.hero h1>span{display:block;font-size:25px;margin-bottom:5px}.hero>p:not(.eyebrow){color:var(--muted);margin-bottom:20px}.tags{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:0}.tags li{font-size:14px;border:1px solid var(--line);border-radius:30px;padding:4px 12px;background:#fffdf7}.preview-section{max-width:588px;margin:0 auto 40px}.section-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0}.section-top h2{font-size:16px;margin:0}.section-top .eyebrow{margin:0;font-size:14px}.paper-frame{padding:20px;background:#ecece2;border:1px solid #e1e1d5;border-radius:8px}.paper-frame canvas{display:block;width:100%;height:auto;box-shadow:0 4px 16px #42493415;background:var(--paper)}.hint{font-size:14px;color:var(--muted);line-height:1.8}.centered{text-align:center}.preview-section>.hint{margin:12px 0}.preview-actions{display:flex;justify-content:center;gap:12px;margin-top:20px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;min-height:48px;padding:11px 20px;border:1px solid #cbd1bf;border-radius:8px;background:var(--paper);font-size:16px}.button:hover{background:#eeefe4}.button.primary{background:var(--accent);border-color:var(--accent);color:white}.button.primary:hover{background:#526347}#editor{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px 32px 26px;scroll-margin-top:20px}.control-section{padding:28px 0;border-bottom:1px solid var(--line)}.control-section h2{display:flex;align-items:center;gap:12px;font-size:21px;margin-bottom:22px}.step{font-size:14px;color:var(--accent);background:#eff0e5;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0}.control-section label:not(.design){display:block;margin:16px 0 6px}.control-section label>.hint{margin-left:8px}input:not([type=radio]),select,textarea{width:100%;min-width:0;border:1px solid #d8dbce;border-radius:7px;background:#fff;padding:11px 12px;font-size:16px;min-height:48px;line-height:1.65}textarea{display:block;resize:vertical}input::placeholder,textarea::placeholder{color:#85877f}.design-field{border:0;padding:0;margin:24px 0 0;min-width:0}.design-field legend{margin-bottom:12px}.designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.design{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 6px 12px;border:1px solid #dadccf;border-radius:8px;cursor:pointer;min-height:100px}.design input{position:absolute;left:8px;top:8px;margin:0;accent-color:var(--accent);width:16px;height:16px}.design:has(input:checked){background:#f1f3e9;border:2px solid var(--accent);padding:15px 5px 11px}.design:has(input:focus-visible){outline:3px solid #8a9c7b;outline-offset:3px}.swatches{display:flex;gap:3px;transform:rotate(-4deg)}.swatches i{width:24px;height:17px;background:var(--pink)}.swatches i:nth-child(2){background:var(--green)}.swatches i:nth-child(3){background:var(--blue)}.pop{--pink:#f3a39a;--green:#f3d576;--blue:#a8d6e7}.retro{--pink:#bc8067;--green:#a4a77b;--blue:#879eaf}.gentle>span:last-child{font-family:'Klee One',serif}.pop>span:last-child{font-family:'Mochiy Pop One',sans-serif}.retro>span:last-child{font-family:'Kaisei Decol',serif}.row-card{background:#f8f8f1;border:1px solid #e4e4da;border-radius:9px;padding:20px;margin-top:20px;min-width:0}.row-card h3{font-size:14px;letter-spacing:.1em;color:var(--accent);margin:0 0 8px}.row-card label{font-size:14px}.row-card .item-label{font-size:16px}.candidate-dot{display:inline-flex;justify-content:center;align-items:center;border-radius:50%;width:27px;height:27px;background:var(--pink);margin-right:6px}.candidate-dot.c1{background:var(--green)}.candidate-dot.c2{background:var(--blue)}.back-preview{display:block;text-align:center;font-size:14px;padding:20px 0 0}.save-area{text-align:center;padding:40px 0}.save-area h2{font-family:'Klee One',serif;font-size:25px}.save-area>.primary{width:100%;max-width:360px}.save-area>.hint{margin:14px 0}.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:5px;min-height:44px;padding:8px;font-size:14px}.save-area .privacy{margin-top:24px}.tool-information{max-width:640px;margin:auto}.info-section{border-top:1px solid var(--line);padding:40px 0}.info-section>.eyebrow,.info-section>h2{text-align:center}.info-section>h2{font-family:'Klee One',serif;font-size:26px;margin-bottom:26px}.info-section p:last-child{margin-bottom:0}.recommend-list{padding-left:24px}.recommend-list li{margin:12px 0}.recommend-list li::marker{color:#91a084}.howto-list{padding-left:28px}.howto-list li{padding-left:8px;margin:22px 0}.howto-list h3{margin-bottom:5px}.howto-list p{color:var(--muted);margin-bottom:0}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}summary{padding:18px 4px;cursor:pointer;min-height:56px}details p{padding:0 16px 20px;color:var(--muted)}.share-section{text-align:center}.hashtag{color:var(--accent);font-size:20px}.tool-card-list{display:grid;gap:12px}.tool-card{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:8px;text-decoration:none}.tool-card small{display:block;font-size:14px;color:var(--muted);margin-top:4px}.tool-card:hover{border-color:#8a9c7b}.all-tools{display:inline-block;padding:16px 0;font-size:16px}.site-footer{text-align:center;border-top:1px solid var(--line);padding:28px 16px;color:var(--muted);font-size:14px}.site-footer a{display:inline-flex;align-items:center;min-height:44px}.site-footer p{margin:8px 0}dialog{border:1px solid var(--line);border-radius:12px;padding:28px;max-width:calc(100% - 32px);width:460px;max-height:90vh;max-height:90dvh;overflow-y:auto;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#343a315e}dialog h2{padding-right:22px;font-size:21px}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.dialog-actions>*{flex:1;white-space:normal;min-width:140px}#export-image{display:block;max-width:100%;width:auto;height:auto;max-height:48vh;margin:12px auto 22px;box-shadow:0 2px 12px #0001}#export-dialog>.button{width:100%;margin-bottom:12px}.close-button{position:absolute;right:6px;top:6px;width:44px;height:44px;border:0;background:transparent;font-size:26px}#status:empty,#font-status:empty,#copy-status:empty,#export-status:empty{display:none}noscript{display:block;text-align:center;padding:20px}.info-section,#preview,#save-area{scroll-margin-top:20px}
@media(max-width:600px){main{padding:0 16px}.site-header{padding:12px 16px}.hero{padding:26px 0 20px}.hero h1{font-size:29px;letter-spacing:.02em}.hero h1>span{font-size:22px}.tags{gap:6px}.tags li{padding:3px 9px}.paper-frame{padding:12px}.preview-actions{gap:8px}.preview-actions .button{padding:10px 12px;flex:1;font-size:14px}#editor{padding:0 16px 20px}.control-section{padding:24px 0}.control-section h2{font-size:19px}.row-card{padding:14px}.designs{gap:7px}.design{font-size:14px;padding-top:26px}.design:has(input:checked){padding-top:25px}.swatches{gap:2px}.swatches i{width:18px;height:15px}.control-section label>.hint{display:block;margin-left:0}.section-top{flex-wrap:wrap}.info-section{padding:32px 0}.info-section>h2{font-size:23px}.save-area h2{font-size:22px}dialog{padding:24px 18px}.tool-card{padding:16px}.hero>p:not(.eyebrow){font-size:16px}}
.candidate-label,.tool-card span,.control-section label{overflow-wrap:anywhere}
.design:not(:has(input:checked))>span:last-child{font-family:'Zen Maru Gothic',sans-serif}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Brush-up: peach web surfaces only. Canvas palette is unchanged. */
.site-header .brand{font-family:'Klee One',serif;font-size:19px;line-height:1.6;letter-spacing:.02em;min-width:0}
.site-header>a{flex-shrink:0}
.site-header .brand>span{font:inherit}
.tags li{background:#fffcf8}
.paper-frame{background:#f8e9dc;border-color:#eadbce}
.row-card{background:#fff8f0;border-color:#eadfd3}
.mobile-nav{display:none}
@media(max-width:720px){
 .mobile-nav{display:flex;position:sticky;top:0;z-index:20;padding:10px 0;margin:0 0 18px;background:#fff3e8;gap:12px}
 .mobile-nav button{flex:1;min-width:0;min-height:44px;font-size:14px;padding:10px 8px}
 #editor,#preview,#howto,#save-area{scroll-margin-top:84px}
 .sentence{display:block}
 .site-header .brand{font-size:16px;max-width:260px}
 .site-header .brand>span{display:block}
}

/* Paper-like operation blocks, informed by priority-matrix's tool-card.
   A quiet vertical wash belongs to the webpage only, not the Canvas. */
:root{background:#fffdf9}
body{min-height:100vh;background:linear-gradient(180deg,#fff1e4 0%,#fff6ee 38%,#fffdf9 68%,#fffdf9 100%)}
#editor{background:#fffdf9;border:1px solid #eadfd4;border-radius:22px;box-shadow:0 5px 18px rgba(111,83,58,.025)}
.save-area{margin:32px 0 56px;padding:40px 32px;background:#fffdf9;border:1px solid #eadfd4;border-radius:22px;box-shadow:0 5px 18px rgba(111,83,58,.035)}
.save-area h2{text-wrap:balance}
.save-area .sentence{display:block}
.tool-information{margin-top:0}
@media(max-width:600px){.save-area{margin:24px 0 40px;padding:32px 16px}}