@import url('/fonts.css');
:root{--ink:var(--t-171719);--muted:var(--t-787779);--paper:var(--c-f6f5f3);--line:var(--c-dedcda);--pink:var(--t-f1b7cc);--accent:var(--c-b94065);--sans:Arial,'Yu Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--c-b94065);outline-offset:4px}[hidden]{display:none!important}.nav{height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:var(--paper);position:relative;z-index:5}.wordmark{font-size:30px;font-weight:800;letter-spacing:-1.5px;display:flex;align-items:center;gap:7px}.brand-symbol{font-size:40px;font-weight:400}.wordmark-small{font-size:10px;font-weight:500;line-height:1.2;letter-spacing:2px;max-width:85px;margin-left:15px;border-left:1px solid var(--c-b7b5b2);padding-left:16px}.nav nav{display:flex;gap:36px;align-items:center;font-size:14px}.nav nav a{padding:9px 0}.nav nav a.current{border-bottom:1px solid var(--ink)}.nav nav span{margin-left:20px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2.4px;display:flex;align-items:center;gap:13px}.tiny-line{display:inline-block;width:28px;height:1px;background:var(--ink)}.serif{font-family:Georgia,'Yu Mincho','Hiragino Mincho ProN',serif;font-weight:400}.button{border:1px solid var(--ink);padding:17px 25px;display:inline-flex;align-items:center;justify-content:center;gap:32px;font-size:14px;transition:background .2s,transform .2s}.primary{background:var(--ink);color:var(--t-ffffff)}.primary:hover:not(:disabled){background:var(--c-383335);transform:translateY(-1px)}.secondary{background:transparent;color:var(--ink)}.secondary:hover{background:var(--c-e9e5e2)}.scroll-story{height:340vh;min-height:1800px}.story-sticky{position:sticky;top:0;min-height:760px;height:100vh;max-height:1100px;display:grid;grid-template-columns:.88fr 1.12fr;grid-template-rows:1fr auto;gap:0 5%;padding:35px 5% 25px;overflow:hidden}.story-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-bottom:30px}.story-copy h1{font-size:clamp(42px,4.5vw,76px);letter-spacing:-3px;line-height:1.28;font-weight:500;margin:25px 0}.story-copy h1 .serif{color:var(--t-aa4969)}.hero-description{line-height:1.95;font-size:15px;color:var(--t-706a6d);margin:0 0 30px}.hero-note{display:flex;gap:24px;margin-top:65px;align-items:center}.hero-note>span:first-child{border:1px solid var(--c-ccc4c5);border-radius:50%;width:60px;height:60px;display:grid;place-items:center;font-size:11px}.hero-note>span:nth-child(2){font-size:10px;letter-spacing:1.2px;line-height:1.8}.scroll-arrow{font-size:32px;font-weight:200}.story-visual{display:flex;flex-direction:column;align-self:center;min-width:0}.visual-top,.visual-bottom{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;padding:12px 0}.visual-bottom{font-size:11px;letter-spacing:.8px}.story-visual canvas{width:100%;max-height:65vh;object-fit:contain;background:var(--c-eae5e3);box-shadow:0 20px 40px #23191c08}.timeline{grid-column:1/-1;margin-top:26px}.timeline-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--t-9a9597);letter-spacing:1px}.timeline-labels span{transition:color .2s}.timeline-labels span.active{color:var(--t-ac4668)}.timeline-labels b{font-weight:400;margin-left:12px;font-size:13px}.timeline input{display:block;width:100%;height:3px;margin:15px 0;accent-color:var(--c-a73e60);cursor:ew-resize}.timeline-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--t-93908d)}.showcase-templates{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:50px auto;max-width:1350px}.showcase-templates article canvas{width:100%;display:block}.showcase-templates article div{display:flex;align-items:center;justify-content:space-between;margin-top:14px;text-align:left}.showcase-templates h3{font-size:14px;font-weight:500}.showcase-templates article span{font-size:12px;color:var(--t-6f666a)}footer{padding:38px 5%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}footer .wordmark{font-size:25px}footer>span{font-size:11px;letter-spacing:1px;color:var(--t-898184)}.studio-title{padding:38px 4% 28px;display:flex;align-items:center;justify-content:space-between}.studio-title h1{font-size:29px;font-weight:500;margin:12px 0 0;letter-spacing:-.8px}.studio-title h1 span{font-size:27px;color:var(--t-817577);margin-left:10px}.mode-label{border:1px solid var(--c-ccc2c5);padding:10px 15px;font-size:12px;color:var(--t-6f5962);border-radius:30px}.studio-layout{padding:0 4% 65px;display:grid;grid-template-columns:280px minmax(340px,1fr) 230px;gap:26px;align-items:start}.panel{background:var(--c-ffffff);border:1px solid var(--line);padding:22px}.section-label{display:flex;align-items:center;gap:10px;margin-bottom:18px}.section-label>span:first-child{font-size:11px;color:var(--t-a35d76)}.section-label h2{font-size:15px;font-weight:500;margin:0}.text-button{border:0;background:none;font-size:11px;color:var(--t-9c4765);padding:0}.section-label .text-button{margin-left:auto}.upload-zone{border:1px dashed var(--c-c8bfc2);min-height:180px;display:flex!important;align-items:center;justify-content:center;gap:10px;flex-direction:column;background:var(--c-f9f6f7);position:relative;overflow:hidden;cursor:pointer;margin:0!important;padding:18px}.upload-zone.drag{background:var(--c-f4d3df);border-color:var(--c-ae4b6f)}.upload-zone input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;inset:0;margin:0}.upload-zone .upload-icon{font-size:25px;color:var(--t-9d8d92)}.upload-zone strong{font-size:12px;font-weight:400}.upload-zone>span:last-child{font-size:10px;color:var(--t-978a90)}.upload-zone img{width:100%;height:120px;object-fit:contain}.upload-zone:has(img:not([hidden])) .upload-icon{display:none}.check-label{font-size:11px!important;display:flex!important;align-items:center;gap:7px;margin:14px 0 6px!important;color:var(--t-6e6367)!important}.check-label input{width:auto!important;accent-color:var(--c-a34869);margin:0!important}.check-label span{margin-left:auto}.field-help{font-size:10px;line-height:1.6;color:var(--t-a2989b);margin:0}.info-label{border-top:1px solid var(--c-eee7e9);padding-top:22px;margin-top:23px}.small-muted{margin-left:auto;font-size:10px;color:var(--t-9f9699)}.editor form>label,.generation-mode>label{display:block;font-size:12px;color:var(--t-51494c);margin:16px 0}.editor label>span:not(.upload-icon){color:var(--t-a1858e)}.editor input:not([type=file]):not([type=checkbox]),.editor textarea,.editor select{width:100%;padding:11px 12px;border:1px solid var(--c-ded9db);border-radius:0;background:var(--c-ffffff);font-size:12px;display:block;margin-top:8px;color:var(--t-3b3337);resize:vertical}.editor input::placeholder,.editor textarea::placeholder{color:var(--t-b1a6ab)}.generation-mode{margin-top:22px;border-top:1px solid var(--c-eee7e9);padding-top:3px}.generation-mode p{font-size:10px;color:var(--t-95868d);line-height:1.7}.generate{width:100%;font-size:12px;margin-top:5px;padding:15px 8px;gap:8px}.generate>span{font-size:20px}.cost-caption{font-size:10px;line-height:1.7;color:var(--t-948a8e);text-align:center;margin-bottom:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;height:38px;margin-bottom:12px;font-size:10px;color:var(--t-9a8d92);gap:10px}.preview-toolbar strong{font-size:12px;color:var(--t-60545a);font-weight:400;margin-right:12px}.preview-dot{display:inline-block;width:5px;height:5px;background:var(--c-a86a82);border-radius:50%;margin-right:7px}.canvas-wrap{position:relative;background:var(--c-ede9e7);border:1px solid var(--c-e4dcdf);aspect-ratio:1;overflow:hidden}.canvas-wrap canvas{width:100%;display:block}.empty-preview{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 55% 45%,var(--c-f1dfe5),var(--c-e9e5e2))}.empty-preview>span{font-size:50px;color:var(--t-b28393)}.empty-preview h2{font-size:38px;line-height:1.5;text-align:center;letter-spacing:-1.5px;font-weight:400;margin:20px}.empty-preview p{font-size:12px;color:var(--t-95858c)}.empty-preview button{margin-top:15px;padding:12px 22px;font-size:12px}.preview-caption{display:flex;justify-content:space-between;margin-top:13px;font-size:10px;color:var(--t-92838a);gap:10px}.template-heading{display:flex;justify-content:space-between;align-items:center;margin:30px 0 16px}.template-heading h2{font-size:14px;font-weight:500;margin:0}.template-heading span{font-size:10px;color:var(--t-978990)}.template-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.template-card{border:1px solid var(--c-ddd4d8);background:transparent;padding:6px;position:relative;text-align:left}.template-card.selected{border-color:var(--c-a45474);box-shadow:0 0 0 1px #a45474}.template-card canvas{width:100%;display:block}.template-card>span{display:flex;flex-direction:column;padding:10px 4px 4px;gap:5px}.template-card b{font-size:12px;font-weight:500}.template-card small{font-size:9px;color:var(--t-97818b)}.template-card i{position:absolute;right:10px;bottom:26px;font-size:10px;font-style:normal;color:var(--t-b295a1)}.export-bar{display:flex;align-items:center;justify-content:space-between;margin-top:25px;border-top:1px solid var(--c-dfd7da);padding-top:23px;gap:12px}.export-bar strong{font-size:13px;font-weight:500;display:block}.export-bar>div>span{display:block;font-size:10px;color:var(--t-9a8790);margin-top:8px}.export-bar .button{font-size:12px;padding:13px 18px;gap:22px}.status-message{font-size:12px;line-height:1.6;color:var(--t-9d4566);min-height:20px}.activity{padding:22px 18px}.activity-intro{font-size:11px;color:var(--t-9c8f95);margin-bottom:24px}.counter-grid{display:grid;grid-template-columns:1fr 1fr;gap:23px 10px;padding-bottom:24px;border-bottom:1px solid var(--c-e8e0e4)}.counter-grid b{font-family:Georgia,serif;font-weight:400;font-size:33px;display:block}.counter-grid span{font-size:10px;color:var(--t-9d8b94);display:block;margin-top:5px}.audit-state{display:flex;justify-content:space-between;font-size:10px;margin-top:18px;color:var(--t-9a8c92);gap:10px}.audit-state strong{font-weight:400;color:var(--t-6f5963)}.event-log{padding-top:20px;font-size:10px;line-height:1.8;color:var(--t-96838c);max-height:260px;overflow:auto}.event-log p{margin:0 0 16px;overflow-wrap:anywhere}.event-log time{display:block;font-size:9px;color:var(--t-b4a3ab)}.activity details{border-top:1px solid var(--c-e8e0e4);padding-top:16px;margin-top:10px;font-size:10px;color:var(--t-8d7783)}.activity summary{cursor:pointer}.activity pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:9px;line-height:1.6;max-height:280px;overflow:auto}.history-heading{display:flex;justify-content:space-between;align-items:center;margin-top:28px}.history-heading h3{font-size:12px;font-weight:500}.history-list{max-height:260px;overflow:auto}.history-list p{font-size:10px;color:var(--t-a48e9a)}.history-list button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-bottom:1px solid var(--c-eee5e9);background:none;text-align:left;padding:13px 0;font-size:11px;gap:8px;color:var(--t-6e5661)}.history-list small{font-size:9px;color:var(--t-b492a2)}.activity-footnote{font-size:10px;line-height:1.8;color:var(--t-b199a5);border-top:1px solid var(--c-e8e0e4);margin-top:25px;padding-top:16px}.working-overlay{position:absolute;inset:0;background:var(--c-eee5e7dc);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;color:var(--t-745160)}.working-overlay span{font-size:11px;padding:0 30px;text-align:center;line-height:1.7}.spinner{width:35px;height:35px;border:2px solid var(--c-ceb3bd);border-top-color:var(--c-9d4e6d);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--c-272125);color:var(--t-ffffff);padding:15px 25px;z-index:50;font-size:13px;max-width:90vw;box-shadow:0 8px 30px #0002}
@media(min-width:1550px){.studio-layout{grid-template-columns:310px minmax(500px,780px) 260px;justify-content:center}.story-sticky{padding-left:max(5%,calc((100vw - 1600px)/2));padding-right:max(5%,calc((100vw - 1600px)/2))}}
@media(max-width:1150px){.studio-layout{grid-template-columns:260px minmax(320px,1fr);gap:24px}.activity{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.activity .section-label,.activity-intro,.counter-grid{grid-column:1}.activity .event-log{grid-column:2;grid-row:1/6}.activity-footnote{grid-column:1/-1}.story-copy h1{font-size:45px}.hero-note{margin-top:40px}.story-sticky{min-height:690px}.showcase-templates article div{display:block}}
@media(max-width:760px){.nav{height:72px;padding:0 5%}.wordmark{font-size:26px}.brand-symbol{font-size:34px}.wordmark-small{display:none}.nav nav{gap:22px;font-size:12px}.nav nav span{margin-left:5px}.scroll-story{height:300vh;min-height:1700px}.story-sticky{height:100svh;min-height:700px;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;padding:20px 6% 24px;gap:0}.story-copy{padding:0;display:block}.story-copy .eyebrow{font-size:9px;margin:0 0 10px}.story-copy h1{font-size:32px;line-height:1.3;letter-spacing:-1px;margin:12px 0}.story-copy h1 br{display:none}.hero-description{font-size:11px;line-height:1.6;margin:0 0 12px}.story-copy .button{position:absolute;right:6%;top:88px;font-size:10px;padding:12px;gap:8px}.hero-note{display:none}.story-visual{width:min(100%,43vh);margin:auto}.story-visual canvas{max-height:44vh}.visual-top,.visual-bottom{font-size:8px;padding:7px 0}.timeline{margin-top:12px}.timeline-labels b{font-size:10px;margin-left:5px}.timeline-labels{font-size:9px}.timeline-meta{font-size:9px}.showcase-templates{gap:12px;margin:30px 0}.showcase-templates h3{font-size:10px}.showcase-templates article span{display:none}.eyebrow{font-size:9px}.studio-title{padding:24px 5%;display:block}.studio-title h1{font-size:24px}.studio-title h1 span{font-size:21px}.mode-label{display:inline-block;margin-top:15px;font-size:10px;padding:7px 12px}.studio-layout{display:flex;flex-direction:column;padding:0 5% 40px;gap:25px}.editor,.workspace,.activity{width:100%}.editor{padding:22px}.upload-zone{min-height:150px}.activity{display:block}.preview-toolbar{font-size:9px}.preview-toolbar strong{margin-right:4px}.preview-caption{font-size:9px}.export-bar .button{padding:12px;font-size:11px}.template-card small{font-size:9px}.empty-preview h2{font-size:28px}.empty-preview>span{font-size:32px}.activity .counter-grid{grid-template-columns:repeat(4,1fr)}footer{padding:25px 5%}footer>span{font-size:9px}footer>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* Keep the scroll-controlled frame square and the timeline within the viewport. */
@media(min-width:761px){.story-sticky{min-height:620px}.story-visual{width:min(100%,64vh);margin-inline:auto}.story-visual canvas{max-height:none;aspect-ratio:1}.hero-note{margin-top:38px}}
@media(max-width:760px){.story-sticky{min-height:650px}.story-visual canvas{max-height:none;aspect-ratio:1}}
/* Japanese tool labels and viewport-sized editing surface. */
.editor form>label,.generation-mode>label{font-size:14px}.editor input:not([type=file]):not([type=checkbox]),.editor textarea,.editor select{font-size:13px}.counter-grid span{font-size:11px}.section-label h2{font-size:15px}.event-log{font-size:11px}.activity summary{font-size:12px}.template-card b{font-size:13px}
@media(min-width:761px){.canvas-wrap{max-width:570px;margin-inline:auto}.preview-toolbar,.preview-caption{max-width:570px;margin-inline:auto}.template-card canvas{max-height:140px;object-fit:contain;background:var(--c-ece5e6)}.template-card small{font-size:10px}}
@media(max-width:760px){.story-copy .button{position:static;margin-top:2px;font-size:12px;padding:12px 17px}.story-copy h1{font-size:29px}.story-copy .hero-description{font-size:12px}.story-visual{width:min(100%,40vh)}.empty-preview h2{font-size:30px}.template-heading span{font-size:9px}.preview-caption{flex-direction:column;gap:4px}}
.template-usage{font-size:11px;line-height:1.8;color:var(--t-686d65);margin:15px 0 20px;padding:12px 15px;border-left:2px solid var(--c-93a696);background:var(--c-f1f3ee)}
/* Prefer the correct CJK glyph family for the selected interface language. */
:root:lang(zh){--sans:Arial,'Microsoft YaHei','PingFang SC','Noto Sans CJK SC',sans-serif}

/* Shared vector mark matches the favicon independently of platform glyphs. */
.brand-symbol{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.brand-symbol svg{display:block;width:1em;height:1em;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.wordmark:hover .brand-symbol svg,.wordmark:focus-visible .brand-symbol svg{transform:rotate(45deg)}
footer .brand-symbol{font-size:24px}
@media(prefers-reduced-motion:reduce){.brand-symbol svg{transition:none}.wordmark:hover .brand-symbol svg,.wordmark:focus-visible .brand-symbol svg{transform:none}}

/* Some legacy display rules used !important; hidden controls must remain hidden. */
.native-artwork-mode .check-label[hidden],.native-artwork-mode .framing-controls[hidden]{display:none!important}

/* Customer workspace: diagnostics are available on demand. */
.studio-layout{grid-template-columns:310px minmax(0,780px);justify-content:center}.activity{grid-column:1/-1;display:block;position:static}.execution-details>summary{cursor:pointer;padding:10px 0;font-size:13px;color:var(--muted)}.execution-details[open]>summary{margin-bottom:20px}.activity .event-log{max-height:220px}.activity .history-list{max-height:240px}.activity .history-heading{margin-top:20px}.execution-details:not([open])+.activity-records .history-heading{margin-top:10px}@media(max-width:1150px){.studio-layout{grid-template-columns:260px minmax(0,1fr)}}@media(max-width:760px){.studio-layout{grid-template-columns:1fr}}
/* Between a phone and a wide screen the five links (AI 比較 since 2026-10-26) and the Studio's theme and language menus share one row: the small label goes, the links keep their line (QA 2026-10-27: at 1024 they broke mid-word). */
@media(min-width:761px) and (max-width:1240px){.wordmark-small{display:none}.nav nav{gap:20px;font-size:13px}.nav nav a{white-space:nowrap}.nav nav span{margin-left:6px}}