:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#292b27;background:#f7f6f2;font-synthesis:none;--orange:#df5130;--muted:#6b6d65;--line:#e3e3db}*{box-sizing:border-box}body{margin:0}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;min-height:44px}a{color:inherit;text-decoration:none}button:disabled{opacity:.4;cursor:default}button:not(:disabled):hover{filter:brightness(.95);transform:translateY(-1px)}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #29775f;outline-offset:4px}.header{max-width:1200px;margin:auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-size:20px;font-weight:800;letter-spacing:-1px;white-space:nowrap}.brand-icon{display:grid;place-items:center;background:var(--orange);color:white;width:34px;height:34px;border-radius:11px;margin-right:10px;font-size:27px}.brand-dot{color:var(--orange)}.free{font-size:11px;color:#62685b;border:1px solid #d9ddd0;background:#efF1e8;padding:7px 12px;border-radius:30px}main{max-width:1040px;padding:0 32px;margin:auto}.intro{position:relative;padding:58px 0 42px;text-align:center}.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;letter-spacing:2px;color:var(--muted)}.eyebrow span{width:6px;height:6px;background:var(--orange);border-radius:50%}h1{font-size:clamp(27px,3.4vw,40px);letter-spacing:-1.8px;line-height:1.7;margin:14px 0 10px}.underline{position:relative;white-space:nowrap}.underline:after{content:"";position:absolute;bottom:-6px;left:0;width:100%;height:7px;border-top:3px solid #edaa8e;border-radius:50%;transform:rotate(-3deg)}.intro p{font-size:13px;color:var(--muted)}.spark{position:absolute;right:50px;top:69px;color:#b5bc9b;font-size:44px;transform:rotate(15deg)}.mobile-break{display:none}.workspace{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;align-items:start}.card{border:1px solid var(--line);border-radius:22px;padding:28px;background:#fff}.instant{background:#f0f1e8;min-height:489px;text-align:center}.section-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;letter-spacing:1.2px;color:var(--muted);text-align:left}.section-meta>span:last-child{font-size:22px;font-weight:400}.dice{width:85px;height:85px;background:#fff;border:1px solid #dadccb;border-radius:21px;transform:rotate(-12deg);margin:38px auto 26px;box-shadow:6px 7px 0 #dee1d0;position:relative}.dice i{position:absolute;width:11px;height:11px;border-radius:50%;background:#76835f}.dice i:nth-child(1){left:18px;top:18px}.dice i:nth-child(2){right:18px;top:18px}.dice i:nth-child(3){left:36px;top:36px}.dice i:nth-child(4){left:18px;bottom:18px}.dice i:nth-child(5){right:18px;bottom:18px}h2{font-size:22px;letter-spacing:-.6px;margin:20px 0 10px}.card p{font-size:12px;color:var(--muted);line-height:1.9;margin:0 0 22px}.primary{display:flex;width:100%;align-items:center;justify-content:center;position:relative;gap:18px;min-height:58px;border-radius:12px;background:var(--orange);color:white;font-weight:700;font-size:17px;transition:transform .15s,filter .15s}.primary span{position:absolute;right:20px;font-weight:400;font-size:22px}.instant>.primary{margin-top:27px}.tiny{display:block;color:var(--muted);font-size:10px;margin-top:16px}.dark{background:#30372f}.custom h2{margin-top:18px}.custom>p{margin-bottom:24px}.field-label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:10px}.field-label span{font-size:10px;color:var(--muted);font-weight:400}textarea{display:block;width:100%;height:139px;resize:vertical;min-height:120px;max-height:500px;padding:14px 16px;font:14px/1.9 inherit;font-family:inherit;line-height:1.9;border:1px solid #dcdfd6;border-radius:10px;background:#fafbf8;color:#292b27}textarea::placeholder{color:#8a9086}.input-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:9px}.input-meta strong{font-size:12px;color:#414c3a}.error{color:#b23922!important;font-size:12px!important;margin:8px 0!important;line-height:1.6!important}.error:empty{display:none}.custom>.primary{margin-top:16px}.templates{margin-top:23px;border-top:1px dashed var(--line);padding-top:18px}.template-label{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin-bottom:10px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.template-grid button{font-size:11px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:7px 3px}.template-grid button[aria-pressed=true]{background:#f0f1e8;border-color:#818e6c}.template-note{display:block;color:var(--muted);font-size:10px;margin-top:9px}.result{border-top:1px solid #d7dbca;margin-top:26px;padding-top:24px;text-align:center;animation:reveal .18s ease-out}.result-kicker{font-size:12px;color:var(--muted);display:block}.result-category{display:inline-block;font-size:11px;color:#526341;margin-top:12px}.result h3{font-size:clamp(26px,3vw,34px);line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap;margin:12px 0;letter-spacing:-1px}.result h3:focus{outline:none}.result .result-caption{margin:0 0 18px;font-size:11px}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.secondary{padding:9px 16px;background:#fff;border:1px solid #ccd1c0;border-radius:9px;font-size:12px;font-weight:700}.text-button{background:none;color:var(--muted);font-size:11px;padding:8px}.history-section{margin:40px 0 36px}.history-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.history-heading h2{font-size:14px;margin:0}.history-heading h2>span:first-child{font-size:20px;margin-right:5px}.history-heading h2>span:last-child{font-size:10px;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:10px}.empty{border:1px dashed #d9dbd1;border-radius:12px;padding:27px 15px;text-align:center;font-size:12px;color:#717668}.history-row{display:flex;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}.history-icon{background:#eeeee7;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex-shrink:0}.history-content{min-width:0;flex:1}.history-text{font-size:13px;overflow-wrap:anywhere;display:block}.history-time{font-size:10px;color:var(--muted);margin-top:4px;display:block}.delete{background:transparent;color:var(--muted);font-size:18px;min-width:44px}.privacy{text-align:center;font-size:10px;color:var(--muted);line-height:1.9;margin-top:16px}footer{max-width:1120px;margin:0 auto;padding:25px 24px;border-top:1px solid var(--line);display:flex;gap:24px;align-items:center;font-size:10px;color:var(--muted)}.footer-brand{font-size:13px;color:#45483f}.footer-note{margin-left:auto}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;top:10px;left:10px;z-index:10;padding:12px;background:white}[hidden]{display:none!important}@keyframes reveal{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.header{padding:20px}.brand{font-size:17px}.free{font-size:9px;padding:6px 8px}.brand-icon{width:30px;height:30px;font-size:24px}main{padding:0 18px;max-width:520px}.intro{padding:38px 0 30px}.eyebrow{font-size:10px;letter-spacing:1.5px}.mobile-break{display:block}h1{font-size:29px;line-height:1.6;letter-spacing:-1px}.intro p{font-size:11px;margin-top:19px}.spark{right:12px;top:48px;font-size:28px}.workspace{grid-template-columns:1fr;gap:18px}.card{padding:23px;border-radius:18px}.instant{min-height:0}.dice{width:69px;height:69px;margin:22px auto 23px;border-radius:17px}.dice i{width:9px;height:9px}.dice i:nth-child(1){left:14px;top:14px}.dice i:nth-child(2){right:14px;top:14px}.dice i:nth-child(3){left:29px;top:29px}.dice i:nth-child(4){left:14px;bottom:14px}.dice i:nth-child(5){right:14px;bottom:14px}.instant>.primary{margin-top:20px}.card h2{font-size:21px}.card p{margin-bottom:16px}.tiny{margin-top:12px}.history-section{margin-top:30px}.privacy{text-align:left}footer{flex-wrap:wrap;gap:12px 20px;padding:23px 20px}.footer-note{margin-left:0;width:100%}.result h3{font-size:28px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Header palette shared with しかく。 */
.header{position:relative;isolation:isolate;background:#101010;border-bottom:5px solid #ffe100}
.header::before{content:"";position:absolute;z-index:-1;inset:0;left:calc((100% - 100vw)/2);right:calc((100% - 100vw)/2);background:#101010;border-bottom:5px solid #ffe100;bottom:-5px}
.header .brand,.header .brand-dot{color:#fff}
.header .brand-icon{background:#ffe100;color:#101010}
.header .free{background:#ffe100;border-color:#ffe100;color:#101010}
body{overflow-x:clip}


.header img.brand-icon{display:block;object-fit:contain;background:#101010;border-radius:0}


/* Choose one mode at a time; preserve each panel and its state. */
.mode-tabs{display:flex;gap:5px;padding:5px;background:#eaeae3;border:1px solid #e0e1d8;border-radius:15px;max-width:660px;margin:0 auto 18px}
.mode-tabs button{flex:1;min-width:0;min-height:54px;padding:10px 8px;background:transparent;border-radius:10px;color:#62675b;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:9px}
.mode-tabs button span{font-size:11px;letter-spacing:1px}
.mode-tabs button[aria-selected="true"]{background:#30372f;color:#fff;box-shadow:0 2px 5px #00000010}
.mode-tabs button[aria-selected="true"] span{color:#ffe100}
.workspace{grid-template-columns:minmax(0,1fr);max-width:660px;margin-inline:auto}
.workspace .instant{min-height:0}
.history-section{max-width:660px;margin-inline:auto}
.card[role="tabpanel"]:focus-visible{outline:3px solid #29775f;outline-offset:4px}
@media(max-width:700px){.mode-tabs{margin-bottom:16px}.mode-tabs button{font-size:12px;gap:7px;min-height:50px}}


.header .header-tagline{background:transparent;border:0;padding:0;color:#fff;white-space:nowrap;font-weight:700;font-size:12px}
.tagline-highlight{display:inline-block;background:#ffe100;color:#101010;border:1px solid #ffe100;border-radius:2px;padding:1px 4px;margin-inline:2px;line-height:1.6}
@media(max-width:480px){.header .header-tagline{font-size:10px}.header .brand{font-size:15px}.header img.brand-icon{width:26px;height:26px;margin-right:7px}.header{gap:8px;padding-inline:16px}}
@media(max-width:350px){.header .header-tagline{font-size:9px}.header .brand{font-size:14px}.header{gap:5px;padding-inline:12px}.tagline-highlight{padding-inline:2px;margin-inline:1px}}


/* Shorter app name, with a stronger header presence. */
.header .brand{font-size:32px;font-weight:900;letter-spacing:.01em;flex-shrink:0;line-height:1.4}
.header img.brand-icon{width:38px;height:38px;margin-right:10px}
@media(max-width:700px){.header .brand{font-size:28px}.header img.brand-icon{width:32px;height:32px;margin-right:8px}}
@media(max-width:350px){.header .brand{font-size:25px}.header img.brand-icon{width:28px;height:28px;margin-right:5px}}


/* Footer typography matches しかく。: centered, 12px. */
footer{max-width:none;margin:26px 0 0;padding:24px 16px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 0;text-align:center;font-size:12px;line-height:1.7;background:#101010;color:#fff;border-top:3px solid #ffe100}
footer .footer-brand{display:inline;font:inherit;letter-spacing:0;color:#fff;white-space:nowrap}
footer .footer-brand::after{content:" ｜ ";white-space:pre}
footer>span{font-size:12px;color:#fff}
footer .footer-note{flex-basis:100%;width:100%;margin:0;color:#b8b8b8;font-size:12px}


.section-meta>span:only-child{font-size:10px;font-weight:700}


/* Shared type foundation with しかく。 */
:root{font-family:system-ui,sans-serif;font-size:15px;line-height:1.7;--muted:#686b70}
body{font:15px/1.7 system-ui,sans-serif;color:#303238}
.intro p,.card p{font-size:15px;line-height:1.7;color:#686b70}
.eyebrow{font-size:12px;letter-spacing:1px}
.field-label{font-size:15px;font-weight:650}
.field-label span,.input-meta,.tiny,.template-label,.template-note{font-size:12px;line-height:1.7}
textarea{font:15px/1.7 system-ui,sans-serif}
textarea::placeholder{color:#73777b;opacity:1}
.template-grid button{font-size:13px;font-weight:600}
.section-meta>span:only-child{font-size:12px}
.result-kicker,.result-category,.result .result-caption,.secondary,.text-button{font-size:13px}
.history-heading h2{font-size:15px}
.history-heading h2>span:last-child,.history-time,.privacy{font-size:12px}
.history-text,.empty{font-size:14px;line-height:1.7}
@media(max-width:700px){.intro p,.card p{font-size:14px}.eyebrow{font-size:12px}.mode-tabs button{font-size:13px}.card .result-caption{font-size:13px}.privacy{font-size:12px}}


/* Same 16px / 1.6 header tagline as しかく。 on every screen. */
.header .header-tagline{font-size:16px;line-height:1.6;font-weight:700}
.header .tagline-highlight{font-size:16px;line-height:1.6;font-weight:800}
@media(max-width:700px){.header{flex-wrap:wrap;gap:10px 16px}.header .header-tagline{font-size:16px;line-height:1.6;margin-left:auto;max-width:100%;white-space:normal;text-align:right}.header .tagline-highlight{font-size:16px;line-height:1.6}}
@media(max-width:480px){.header .header-tagline{flex-basis:100%}}


/* One-row mobile header: keep the full tagline and balance logo/spacing. */
@media(max-width:700px){.header{flex-wrap:nowrap;gap:8px;padding-inline:16px}.header .brand{font-size:24px;letter-spacing:0}.header img.brand-icon{width:26px;height:26px;margin-right:6px}.header .header-tagline{flex:0 0 auto;flex-basis:auto;white-space:nowrap;font-size:14px;line-height:1.6;letter-spacing:0;margin-left:auto}.header .tagline-highlight{font-size:inherit;padding:0 2px;margin-inline:1px}}
@media(max-width:374px){.header{padding-inline:12px;gap:5px}.header .brand{font-size:20px}.header img.brand-icon{width:22px;height:22px;margin-right:4px}.header .header-tagline{font-size:14px}.header .tagline-highlight{padding-inline:1px;margin-inline:0}}
@media(max-width:339px){.header{padding-inline:10px;gap:4px}.header .header-tagline{font-size:13px}.header .brand{font-size:20px}}


/* Let the tagline use all space beside the logo, rather than a half-width column. */
@media(max-width:700px){.header{padding-inline:10px;gap:4px;flex-wrap:nowrap}.header .brand{font-size:22px;letter-spacing:0}.header img.brand-icon{width:20px;height:20px;margin-right:4px}.header .header-tagline{flex:0 0 auto;flex-basis:auto;margin-left:auto;white-space:nowrap;font-size:16px;line-height:1.6;letter-spacing:0}.header .tagline-highlight{font-size:inherit;padding:0 1px;margin-inline:0}}
@media(max-width:374px){.header{padding-inline:6px;gap:3px}.header .brand{font-size:20px}.header img.brand-icon{width:18px;height:18px;margin-right:3px}}
@media(max-width:349px){.header{padding-inline:8px;gap:4px}.header .brand{font-size:20px}.header img.brand-icon{width:18px;height:18px;margin-right:3px}.header .header-tagline{font-size:14px}.header .tagline-highlight{font-size:inherit}}