:root{--ink:#24231f;--paper:#f4f0e7;--line:#d4cdbf;--red:#c83e35;--focus:#115b9d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Noto Sans JP,sans-serif}button,textarea{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}main{min-height:100vh;background:radial-gradient(circle at 75% 5%,rgba(218,177,82,.16),transparent 24rem),var(--paper)}.hero{max-width:1220px;margin:0 auto;padding:70px 32px 42px;position:relative}.hero:after{content:"切\Aり\Aぬ\Aき";white-space:pre;position:absolute;right:7%;top:36px;font-family:"Noto Serif JP",serif;font-size:13px;line-height:1.22;color:#bba773;transform:rotate(8deg)}.eyebrow,.preview-header,footer{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.eyebrow{font-size:11px;margin:0 0 16px;color:#806b3e}h1{font-family:"Noto Serif JP",serif;font-size:clamp(35px,5vw,63px);font-weight:400;letter-spacing:.04em;line-height:1.2;margin:0}h1 em{font-style:normal;color:var(--red)}.hero>p:last-child{max-width:670px;margin:17px 0 0;font-size:13px;line-height:1.9;color:#5e5a53}.workspace{max-width:1220px;margin:0 auto;padding:0 32px 64px;display:grid;grid-template-columns:330px minmax(0,1fr);grid-gap:50px;gap:50px}.controls{padding-top:10px}.control-heading{display:flex;align-items:baseline;gap:11px;margin:0 0 12px}.control-heading span{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:#9e8752}.control-heading b,h2{margin:0;font-size:14px;letter-spacing:.08em}textarea{display:block;resize:vertical;min-height:134px;width:100%;padding:15px;border:1px solid #afa694;border-radius:1px;background:rgba(255,255,255,.6);color:var(--ink);font-size:16px;line-height:1.7;outline:none}textarea:focus{border-color:#685b3e;box-shadow:0 0 0 3px rgba(161,132,72,.14)}.counter{padding-top:7px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:#57534c;text-align:right}.counter small{font-family:inherit;font-size:9px;margin-left:7px}.counter.over,.validation{color:#aa231f}.help{font-size:10px;color:#716b61;margin:4px 0 0}fieldset{border:0;margin:33px 0 0}fieldset,legend{padding:0}.style-grid{display:grid;grid-gap:8px;gap:8px}.style-card{display:block;cursor:pointer;border:1px solid #d1c9ba;background:rgba(255,255,255,.28);padding:11px 12px;transition:.18s}.background-option input,.style-card input{position:absolute;opacity:0;pointer-events:none}.style-card small,.style-card strong{display:block}.style-card strong{font-size:13px;letter-spacing:.04em}.style-card small{font-size:10px;color:#716b61;margin-top:3px}.style-card.selected,.style-card:hover{border-color:#292824;background:#292824;color:#fff}.style-card.selected small{color:#e2dccd}.background-list{display:grid;grid-template-columns:1fr 1fr;grid-gap:7px;gap:7px}.background-option{display:flex;align-items:center;gap:7px;min-height:37px;border:1px solid #d1c9ba;padding:7px;font-size:11px;cursor:pointer;background:rgba(255,255,255,.28)}.background-option.selected{border-color:#292824;box-shadow:inset 0 0 0 1px #292824}.swatch{display:inline-block;width:18px;height:18px;border:1px solid rgba(0,0,0,.22);background:#fcfcfa}.swatch.checker{background:conic-gradient(#ddd 25%,#fff 0 50%,#ddd 0 75%,#fff 0) 0/8px 8px}.swatch.wood{background:repeating-linear-gradient(0deg,#8d5a35,#8d5a35 3px,#704229 4px,#995f36 6px)}.generate{width:100%;margin-top:22px;border:0;background:var(--red);color:#fff;padding:15px;font-weight:700;font-size:14px;letter-spacing:.08em;box-shadow:4px 4px 0 #962e27;transition:.18s}.generate:hover:not(:disabled){transform:translate(2px,2px);box-shadow:2px 2px 0 #962e27}.generate:disabled,.preview-actions button:disabled{opacity:.45;cursor:not-allowed}.privacy{font-size:10px;color:#716b61;line-height:1.7;margin:18px 0 0}.preview-wrap{min-width:0}.preview-header{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#5f584a;margin:0 1px 10px}.seed{color:#8a7854}.zoom-controls{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin:0 0 9px;font-size:10px;color:#5e584e}.zoom-controls span{margin-right:3px}.zoom-controls button{border:1px solid #b9ad97;padding:5px 7px;background:rgba(255,255,255,.4);font-size:10px;color:#393733}.zoom-controls button.active{background:#292824;color:white;border-color:#292824}.preview-background{position:relative;min-height:270px;border:1px solid #c7bead;overflow:hidden}.preview-background.white{background:#fcfcfa}.preview-background.black{background:#191919}.preview-background.checker{background:conic-gradient(#dedede 25%,#fff 0 50%,#dedede 0 75%,#fff 0) 0/20px 20px}.preview-background.wood{background:repeating-linear-gradient(0deg,#92603b,#92603b 4px,#6d4029 5px,#9f673d 8px)}.preview-viewport{position:relative;overflow:auto;min-height:270px;padding:18px 0;display:flex;align-items:center}.canvas-sizer{flex:0 0 800px;margin:auto}.collage-canvas{display:block;width:800px;height:auto;box-shadow:7px 8px 0 rgba(38,27,9,.2)}.fit-size .canvas-sizer{width:min(800px,100%);flex-basis:auto}.fit-size .collage-canvas{width:100%;height:auto}.loading{z-index:3;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;background:rgba(245,242,235,.72);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);font-size:12px;color:#332e25}.loading span{width:27px;height:27px;border:3px solid #b69b63;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.preview-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.preview-actions button{border:1px solid #9f9380;padding:10px 12px;font-size:12px;letter-spacing:.04em;background:rgba(255,255,255,.3);color:#302e2a}.preview-actions .download{background:#292824;color:#fff;border-color:#292824}.download span{font-size:16px;margin-left:5px}footer{max-width:1220px;margin:0 auto;padding:20px 32px 25px;border-top:1px solid #d9d2c5;font-size:9px;color:#70695d;display:grid;grid-template-columns:1fr auto auto;grid-gap:30px;gap:30px;align-items:end}footer strong{display:block;color:#413c33;margin-bottom:5px}footer p{margin:0;max-width:580px;line-height:1.8}footer a{color:#4d463b;text-decoration:underline}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media(max-width:800px){.hero{padding:45px 20px 32px}.hero:after{right:8%;top:23px}.workspace{padding:0 20px 45px;display:block}.controls{margin-bottom:37px}.preview-actions{justify-content:space-between;gap:6px}.preview-actions button{padding:10px 8px;font-size:11px}footer{padding:16px 20px;grid-template-columns:1fr auto;gap:12px}footer span{grid-column:1/-1}.preview-viewport{min-height:230px}.background-list{max-width:410px}}@media(max-width:420px){.hero>p:last-child{font-size:12px}.preview-actions .secondary{font-size:0}.preview-actions .secondary:first-child:after{content:"↻ 再生成";font-size:11px}.preview-actions .secondary:nth-child(2):after{content:"リセット";font-size:11px}}.swatch.black{background:#191919}.orientation-list{display:grid;grid-template-columns:1fr 1fr;grid-gap:7px;gap:7px}.orientation-option{display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;border:1px solid #d1c9ba;background:rgba(255,255,255,.28);font-size:12px;cursor:pointer}.orientation-option input{position:absolute;opacity:0;pointer-events:none}.orientation-option.selected{border-color:#292824;box-shadow:inset 0 0 0 1px #292824;background:#292824;color:#fff}.orientation-icon{display:inline-block;border:1.5px solid}.orientation-icon.landscape{width:20px;height:13px}.orientation-icon.portrait{width:13px;height:20px}.preview-viewport.orientation-portrait .canvas-sizer{flex-basis:480px}.preview-viewport.orientation-portrait .collage-canvas{width:480px}.preview-viewport.orientation-portrait.fit-size .canvas-sizer{width:min(480px,100%);flex-basis:auto}.preview-viewport.orientation-portrait.fit-size .collage-canvas{width:100%}