:root{color-scheme:light;--ink:#183147;--muted:#64727b;--paper:#f5f2e9;--line:#dddcd2;--coral:#b9533c;--green:#3d6656;--navy:#14273b;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;font-size:14px}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);line-height:1.7}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #5986a4;outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px max(24px,calc((100vw - 1240px)/2));gap:12px;background:var(--navy);color:#f7f2e6}.back{text-decoration:none;font-size:12px;white-space:nowrap}.brand{font-size:12px;letter-spacing:.15em}.brand span{color:#ddb873;margin-left:12px}.connection-pill{background:transparent;color:#f5dfb6;border:1px solid #69737a;border-radius:24px;padding:7px 13px;font-size:12px;max-width:180px}
main{max-width:1288px;margin:auto;padding:0 24px}.intro{display:flex;align-items:center;justify-content:space-between;padding:42px 0 28px;border-bottom:1px solid var(--line);margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:700;color:var(--muted);margin:0 0 8px}.eyebrow span{margin-left:20px;color:var(--coral)}h1{font-size:clamp(28px,4vw,42px);letter-spacing:.08em;line-height:1.3;margin:0;font-weight:700}.title-dot{color:var(--coral);margin-left:4px}.intro-copy{font-size:13px;color:var(--muted);margin:10px 0 0}.palette{display:flex;gap:9px;align-items:center;transform:rotate(-8deg);padding-right:15px}.palette i{width:27px;height:27px;border-radius:50%;background:#bc6045}.palette i:nth-child(2){background:#d8b969}.palette i:nth-child(3){background:#638573}.palette i:nth-child(4){background:#62869b}.palette span{color:#bb643e;font-size:30px;margin-left:10px}
.atelier{display:grid;grid-template-columns:minmax(340px,430px) minmax(0,1fr);gap:38px;align-items:start}.panel{border:1px solid var(--line);border-radius:8px;background:#fffcf5;padding:24px;box-shadow:0 3px 0 #e9e6dc}.section-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}h2{margin:0;font-size:16px;letter-spacing:.05em}.section-top h2{display:flex;align-items:center;gap:10px}.step{font-size:11px;color:var(--coral);letter-spacing:0}.small-tag{font-size:10px;border:1px solid #d8dfd0;border-radius:3px;color:var(--green);background:#f0f3e9;padding:3px 7px;white-space:nowrap}textarea,input,select{width:100%;border:1px solid #d2d7d2;background:#fffefb;color:var(--ink);border-radius:5px;padding:11px 12px;font-size:14px;line-height:1.5}textarea{resize:vertical;min-height:180px;max-height:500px;font-size:15px;line-height:1.9}textarea:focus,input:focus,select:focus{outline:2px solid #628b91;outline-offset:1px}textarea::placeholder{color:#90999b;font-size:13px}.prompt-foot{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);margin:6px 0 21px}.reference-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.reference-heading h3{font-size:12px;margin:0}.reference-heading>span{font-size:10px;color:var(--muted)}.references{display:flex;gap:8px;flex-wrap:wrap}.ref-item{position:relative;width:76px;height:83px;padding-bottom:16px;margin:0 0 8px}.ref-item img{width:100%;height:67px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}.ref-item figcaption{font-size:10px;text-align:center;line-height:16px}.ref-remove{position:absolute;right:-5px;top:-5px;width:24px;height:24px;border-radius:50%;border:1px solid #c9ceca;background:#fff;color:var(--ink);font-size:17px;line-height:1;padding:0}.upload{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:12px 8px;border:1px dashed #9aafa1;border-radius:5px;background:#f3f5ec;font-size:12px;cursor:pointer;color:var(--green)}.upload span{font-size:19px}.upload small{font-size:9px;width:100%;text-align:center;color:#7c897c}.help{font-size:11px;color:var(--muted);margin:9px 0 0;line-height:1.7}.settings-heading{border-top:1px solid var(--line);padding-top:21px;margin-top:23px;margin-bottom:12px}.field-label{display:block;font-size:11px;font-weight:700;margin:12px 0 5px}.setting-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.advanced{margin-top:14px;font-size:11px;color:var(--muted)}.advanced summary{cursor:pointer;min-height:28px}.advanced select{color:var(--ink)}.billing-note{font-size:10px;color:var(--muted);line-height:1.7;margin:18px 0 14px}.primary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px 16px;min-height:51px;color:#fffaf1;background:var(--green);border:1px solid var(--green);border-radius:5px;font-weight:700;font-size:14px;box-shadow:0 3px 0 #274d3e}.primary:hover{background:#325847}.primary span:last-child{margin-left:auto}.primary span:first-child{margin-right:auto}.cancel{width:100%;padding:10px;margin-top:12px;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--ink);font-size:12px}.status{font-size:11px;color:var(--green);margin:13px 0 0;min-height:19px}.error{font-size:12px;color:#8d302b;background:#fff0e9;border:1px solid #e4beb2;padding:12px;border-radius:5px;margin-top:12px;overflow-wrap:anywhere}
.stage-panel{position:sticky;top:24px;min-width:0}.stage-top{display:flex;justify-content:space-between;align-items:center;margin:0 0 13px}.stage-top h2{font-size:13px}.stage-top>span{font-size:10px;letter-spacing:.05em;color:var(--muted)}.stage{position:relative;display:grid;place-items:center;aspect-ratio:1;background-color:#eeece3;background-image:radial-gradient(#d4d4c9 .8px,transparent .8px);background-size:12px 12px;border:1px solid #d9dace;border-radius:6px;overflow:hidden;min-height:280px}.empty-state{text-align:center;padding:25px;color:var(--muted)}.empty-state p{font-size:14px;letter-spacing:.1em;margin:27px 0 2px}.empty-state small{font-size:11px}.paper-art{position:relative;width:156px;height:184px;margin:auto;overflow:hidden;background:#fffcf3;border:7px solid #fffdf8;border-bottom-width:26px;box-shadow:3px 7px 0 #d4d4c480,0 5px 19px #18314715;transform:rotate(-7deg)}.art-sun{position:absolute;width:39px;height:39px;border-radius:50%;background:#d5b269;right:20px;top:21px}.art-hill{position:absolute;width:150px;height:100px;background:#73937e;transform:rotate(-23deg);left:-29px;bottom:-43px;border-radius:40%}.art-hill.second{background:#416b60;left:35px;bottom:-43px;transform:rotate(30deg)}.art-star{position:absolute;color:#c07050;font-size:22px;top:23px;left:13px}.stage figure{margin:0;width:100%;height:100%;display:grid;place-items:center}.stage figure img{display:block;max-width:100%;max-height:75vh;object-fit:contain;width:100%;height:100%}.stage figcaption{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;font-size:10px;pointer-events:none;color:#fff;text-shadow:0 1px 5px #000}.busy-state{position:absolute;inset:0;background:#f5f2e9ee;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;font-size:12px}.busy-state strong{font-size:17px;margin-top:10px}.busy-state small{color:var(--muted);padding:0 12px;text-align:center;font-size:11px}.spinner{width:36px;height:36px;border:2px solid #c8d1c6;border-top-color:var(--green);border-radius:50%;animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.secondary{border:1px solid #adb8ae;border-radius:4px;background:#fffdf7;color:var(--ink);font-size:12px;padding:10px 13px;min-height:42px}.secondary:hover{background:#edf1e6}.text-button{border:0;background:transparent;font-size:11px;color:var(--muted);padding:10px;text-decoration:underline;text-underline-offset:4px}.result-info{font-size:11px;color:var(--muted);white-space:pre-line;line-height:1.8;margin:12px 0 0}.danger{color:#96382e}
.gallery-section{margin:55px 0 0;padding-top:25px;border-top:1px solid var(--line)}.gallery-heading{display:flex;justify-content:space-between;align-items:end}.gallery-heading>span{font-size:12px;color:var(--muted)}.gallery-heading h2{font-size:21px;letter-spacing:.08em}.gallery-heading .eyebrow{font-size:9px;margin-bottom:4px}.gallery-note{font-size:11px;color:var(--muted);margin:12px 0 22px}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.gallery-empty{grid-column:1/-1;border:1px dashed #d2d3c7;border-radius:6px;text-align:center;padding:35px 12px;color:#899186;font-size:12px}.work-card{min-width:0;background:#fffdf7;border:1px solid var(--line);border-radius:5px;padding:8px;box-shadow:0 3px 0 #e4e2d8}.work-open{border:0;background:transparent;padding:0;width:100%;text-align:left;color:var(--ink)}.work-open img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#efeee7;border-radius:2px}.work-open p{margin:9px 3px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.work-card small{display:block;font-size:9px;color:var(--muted);margin:0 3px 6px}.work-card .text-button{padding:5px 3px;min-height:34px}.work-card-actions{display:flex;justify-content:space-between;gap:4px}footer{text-align:center;color:#8c948b;font-size:10px;letter-spacing:.08em;padding:48px 0 28px}footer span{color:#bb7654;margin:0 6px}dialog{border:1px solid var(--line);border-radius:10px;padding:24px;width:min(480px,calc(100vw - 30px));max-height:90dvh;color:var(--ink);background:#fffdf6;overflow:auto;box-shadow:0 20px 80px #0e233f44}dialog::backdrop{background:#10263c88;backdrop-filter:blur(3px)}.dialog-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.close{background:transparent;border:0;color:var(--muted);font-size:26px;padding:0 4px;width:34px;min-height:34px}dialog .primary{margin-top:20px}.work-dialog{width:min(850px,calc(100vw - 26px))}.work-dialog>img{width:100%;max-height:60vh;object-fit:contain;background:#eeeee6;display:block}.work-dialog pre{font-family:inherit;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;padding:14px;background:#f3f2e9;border-radius:5px;max-height:180px;overflow:auto}
@media(min-width:1450px){.stage{max-height:760px}}@media(max-width:850px){.atelier{grid-template-columns:minmax(280px,370px) minmax(0,1fr);gap:22px}.panel{padding:19px}.palette i{width:20px;height:20px}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.topbar{padding:13px 16px}.brand{font-size:10px;letter-spacing:.03em}.brand span{margin-left:5px}.connection-pill{padding:6px 9px;font-size:10px}.back{font-size:11px}main{padding:0 17px}.intro{padding:29px 0 23px;margin-bottom:22px}.intro h1{font-size:29px}.intro-copy{font-size:11px}.palette{gap:5px;padding:0}.palette i{width:14px;height:14px}.palette span{font-size:20px;margin-left:3px}.eyebrow{font-size:8px}.eyebrow span{margin-left:10px}.atelier{grid-template-columns:1fr;gap:28px}.panel{padding:20px}.stage-panel{position:static}.stage{min-height:240px}.stage figure img{max-height:75vh}.prompt-foot{font-size:9px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gallery-section{margin-top:36px}.gallery-heading h2{font-size:18px}input,select,textarea{font-size:16px}.primary{font-size:14px}.gallery-note{font-size:10px}.result-actions{gap:7px}.secondary{padding:9px 11px}.stage-top h2{font-size:13px}footer{font-size:9px;padding-bottom:max(28px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}