/* SPDX-FileCopyrightText: 2026 Marko Sun
   SPDX-License-Identifier: LicenseRef-Hanama-Proprietary */
:root{--paper:#f7f6f1;--base:#eeede7;--ink:#303931;--muted:#656b60;--line:#dedfd5;--accent:#a5533e;--serif:'Noto Serif SC','Songti SC',SimSun,serif;--sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0;background:transparent}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a{color:inherit}button svg,.text-button svg{width:18px;height:18px;stroke-width:1.6;display:block}span[data-icon]{display:inline-flex;align-items:center;justify-content:center}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500}.masthead{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;flex-shrink:0}.seal{display:grid;place-items:center;width:37px;height:42px;background:var(--accent);color:#fff;border-radius:3px;font-family:var(--serif);font-size:27px}.brand-name{font-family:var(--serif);font-size:27px;letter-spacing:5px;display:flex;align-items:center;gap:14px}.brand-name small{font:11px var(--sans);letter-spacing:3px;border-left:1px solid var(--line);padding-left:16px}.main-nav{display:flex;align-self:stretch;gap:35px}.nav-button{padding:0 4px;font-size:14px;color:var(--muted);position:relative;white-space:nowrap}.nav-button.active{color:var(--ink)}.nav-button.active:after{content:'';position:absolute;bottom:0;left:10px;right:10px;height:2px;background:var(--accent)}#gallery-count{font-size:12px;margin-left:3px}.header-actions{display:flex;gap:18px;align-items:center}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;padding:5px 0;white-space:nowrap}.language-toggle{min-width:38px;height:32px;padding:0 9px;border:1px solid #c9cbbf;border-radius:16px;background:#f4f3ed;font-size:12px;font-weight:600;letter-spacing:.04em}.language-toggle:hover{background:#e7eadf}.header-new{color:#5f6e58}.header-new svg{width:16px;height:16px}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:5px;font-size:14px;padding:13px 20px;min-height:46px;transition:background .2s,transform .2s}@media(hover:hover){.button:hover{filter:brightness(.94);transform:translateY(-1px)}}.button.dark{background:#344335;color:#fff}.button.accent{background:var(--accent);color:#fff}.button.outline{border:1px solid var(--line);background:transparent}.button.small{min-height:40px;padding:9px 15px}.studio-layout{display:grid;grid-template-columns:244px minmax(340px,1fr) 272px;max-width:1780px;margin:auto;min-height:calc(100vh - 135px)}.material-panel,.design-panel{padding:29px 24px}.material-panel{border-right:1px solid var(--line)}.design-panel{border-left:1px solid var(--line)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--muted);font-weight:500}.panel-heading h1,.panel-heading h2{font-size:23px;letter-spacing:2px;font-family:var(--serif);margin-top:8px}.tiny-index{font:10px var(--sans);color:var(--muted);align-self:flex-end;padding-bottom:3px;letter-spacing:1px}.material-tabs{display:flex;padding:4px;background:#eaece3;border-radius:5px;margin-bottom:17px}.material-tabs button{width:50%;font-size:14px;padding:7px;border-radius:3px;color:var(--muted)}.material-tabs button[aria-selected=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 4px #2633260b}.material-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}.material-card{position:relative;border:1px solid var(--line);background:#f4f3ec;border-radius:5px;min-width:0;overflow:hidden;padding:9px 4px 11px;transition:border-color .2s,background .2s;text-align:center}@media(hover:hover){.material-card:hover{border-color:#aaaf9a;background:#eeeee2}}.material-card img{display:block;height:109px;max-width:100%;width:100%;object-fit:contain;margin:0 auto 5px;mix-blend-mode:multiply;pointer-events:none}.material-card strong{display:block;font-size:14px;font-weight:400}.material-card small{font-size:10px;letter-spacing:.3px;color:var(--muted)}.material-card .add-mark{position:absolute;top:4px;right:7px;color:#91967f;font-size:16px}.material-foot{display:flex;gap:10px;color:var(--muted);margin-top:23px}.material-foot svg{width:18px;height:18px}.material-foot p{font-size:12px;line-height:1.85}.source-link{margin-top:22px;border-top:1px solid var(--line);padding:14px 0 0;width:100%;text-align:left;font-size:12px;color:var(--muted)}.source-link span{float:right}.workspace{background:#eeeee8;padding:26px 32px 0;min-width:0;display:flex;flex-direction:column;align-items:center}.workspace-heading{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:18px;gap:12px;max-width:760px}.workspace-heading .eyebrow{font-size:9px;letter-spacing:1.8px}.work-title{display:flex;align-items:center;gap:10px;margin-top:7px}.work-title input{border:0;outline:0;background:transparent;color:var(--ink);font-family:var(--serif);font-size:25px;letter-spacing:2px;width:240px;max-width:100%;padding:0}.work-title span{color:#999e8f}.work-title svg{width:13px;height:13px}.save-state{font-size:11px;color:#898d80;white-space:nowrap}.stage-shell{position:relative;width:100%;max-width:760px;flex:1;display:flex;justify-content:center;align-items:flex-start;min-height:0}.stage{position:relative;aspect-ratio:1;width:100%;max-height:calc(100vh - 266px);max-width:calc(100vh - 266px);min-height:320px;min-width:320px;overflow:hidden;background:radial-gradient(ellipse at 28% 22%,#f9f7ef 0%,#edeadf 58%,#e1ddd1 100%);box-shadow:0 4px 22px #32362608;border:1px solid #e5e3d8;isolation:isolate;touch-action:none;transition:background .4s}.stage[data-scene=stone]{background:radial-gradient(ellipse at 25% 20%,#e2e6e2,#afb9b4)}.stage[data-scene=night]{background:radial-gradient(ellipse at 25% 20%,#58635b,#272f2b);color:#e0dfd1}.stage-grain{position:absolute;inset:0;opacity:.17;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}.scene-label{position:absolute;top:8%;right:8%;writing-mode:vertical-rl;font:12px var(--serif);letter-spacing:6px;color:#8a897b}.scene-caption{position:absolute;left:7%;bottom:6%;display:flex;align-items:center;gap:12px;z-index:300;pointer-events:none}.scene-caption>span{font-family:var(--serif);font-size:19px;letter-spacing:3px;color:#898575}.scene-caption small{font-size:8px;letter-spacing:1.3px;color:#939184}.stage-floor{position:absolute;left:0;right:0;top:80%;bottom:0;background:linear-gradient(160deg,#f5f2e733,#ada89924);border-top:1px solid #9c9b8810;pointer-events:none;z-index:0}.vessel{position:absolute;left:50%;bottom:14%;height:18%;object-fit:contain;transform:translateX(-50%);z-index:200;pointer-events:none;filter:drop-shadow(12px 14px 8px #3a34211c)}.composition{position:absolute;inset:0;z-index:10;pointer-events:none}.stem{position:absolute;transform-origin:50% 100%;pointer-events:auto;cursor:grab;user-select:none;-webkit-user-select:none;outline:none;touch-action:none}.stem:active{cursor:grabbing}.stem img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none;-webkit-user-drag:none}.stem.selected:after{content:'';position:absolute;inset:-5px;border:1px dashed #8a967360;pointer-events:none;border-radius:3px}.stage-tools{position:absolute;top:14px;left:14px;z-index:400;display:flex;align-items:center;gap:3px;background:#faf9f0e8;border:1px solid #deddd1aa;border-radius:6px;padding:4px;box-shadow:0 3px 12px #30392a05}.icon-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}.icon-button:hover{background:#7e8a6315}.icon-button[aria-pressed=true]{color:var(--accent);background:#a5533e12}.tool-separator{height:16px;width:1px;background:var(--line);margin:0 2px}.stage-bottom{width:100%;max-width:760px;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:10px}.scene-picker{display:flex;align-items:center;gap:10px;font-size:12px}.scene-picker>span{margin-right:4px}.scene-dot{width:17px;height:17px;border-radius:50%;border:1px solid #aaa99b}.scene-dot.paper{background:#ebe5d7}.scene-dot.stone{background:#a3b0a8}.scene-dot.night{background:#39483e}.scene-dot.active{outline:1px solid #626e59;outline-offset:3px}.stage-bottom .text-button{font-size:12px}.stage-bottom .text-button svg{width:15px;height:15px}.selected-material{display:flex;align-items:center;gap:12px;margin-bottom:23px}.selected-material>img{width:45px;height:55px;object-fit:contain;background:#ebece2;border-radius:4px}.selected-material>div{flex:1}.selected-material strong{font-weight:500;font-size:14px;display:block;margin-top:3px}.selected-material .eyebrow{font-size:10px;letter-spacing:.5px}.slider-label{font-size:13px;display:flex;justify-content:space-between;margin:18px 0 8px}.slider-label output{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{width:100%;display:block;accent-color:#788266;height:16px;cursor:pointer;margin:0}.adjust-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;margin-top:20px}.adjust-actions button{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:4px;padding:8px 0;font-size:12px}.adjust-actions svg{width:15px;height:15px}.section-rule{border-top:1px solid var(--line);margin:24px 0}.label-with-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.label-with-meta h3{font-size:14px}.label-with-meta>span{font-size:11px;color:var(--muted)}.mood-options{display:flex;gap:7px;margin-bottom:13px}.mood-options button{font-size:12px;padding:6px 11px;border:1px solid var(--line);border-radius:4px}.mood-options button.active{color:#626e4f;background:#e8ebde;border-color:#a5af94}textarea{resize:vertical;width:100%;font-size:12px;line-height:1.85;border:1px solid var(--line);padding:10px;background:transparent;color:var(--ink);border-radius:4px}.creative-tip{display:flex;align-items:center;gap:14px;margin:24px 0;color:#8b8e80}.tip-mark{font:31px var(--serif);color:#a6ae98}.creative-tip p{font-family:var(--serif);font-size:12px;line-height:1.9;letter-spacing:1px}.generation-box{border-top:1px solid var(--line);padding-top:23px}.generation-box h3{font:20px var(--serif);letter-spacing:1px;margin:8px 0 10px}.generation-box>p:not(.eyebrow){font-size:12px;color:var(--muted);line-height:1.9}.generation-box>.button{width:100%;margin:17px 0 8px}.generation-box .arrow{margin-left:auto}.generation-box>small{font-size:10px;text-align:center;display:block;color:var(--muted)}.footer{padding:15px 34px;display:flex;justify-content:space-between;border-top:1px solid var(--line);color:#8d9286;font-size:10px;letter-spacing:1px}.footer>span:last-child{font-size:9px;letter-spacing:1.8px}.composition-guide{position:absolute;inset:0;z-index:301;pointer-events:none}.selection-empty{height:290px;display:grid;place-items:center;color:var(--muted);font-size:14px;line-height:2;text-align:center}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:1000;opacity:0;pointer-events:none;background:#334134;color:white;border-radius:7px;padding:12px 22px;font-size:14px;transition:opacity .2s,transform .2s;max-width:90vw}.toast.visible{opacity:1;transform:translate(-50%,0)}
.toast.has-action{display:flex;align-items:center;gap:12px;width:max-content;padding:6px 8px 6px 22px}.toast-action{flex:none;min-height:32px;padding:4px 12px;border-radius:5px;color:inherit;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.toast.visible .toast-action{pointer-events:auto}.toast-action:hover{background:#ffffff1f}.toast-action:focus-visible{outline:2px solid #fff;outline-offset:2px}dialog{padding:24px 30px 30px;border:1px solid var(--line);border-radius:10px;width:min(800px,calc(100% - 32px));max-height:90vh;color:var(--ink);background:var(--paper);box-shadow:0 20px 120px #21291f30}dialog::backdrop{background:#27332755;backdrop-filter:blur(4px)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}dialog h2{font:29px var(--serif);margin-bottom:14px}dialog p{font-size:14px;line-height:1.85;color:var(--muted);margin:10px 0}dialog h3{font-size:16px;margin:20px 0 8px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.prompt-area{height:230px;font-family:var(--sans);font-size:12px;background:#eceee5;margin-top:12px}.export-preview{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;margin:22px 0}.export-preview img{width:100%;border:1px solid var(--line);border-radius:4px}.step-list{display:grid;gap:16px;margin:20px 0}.step-list>div{display:flex;gap:14px;align-items:flex-start}.step-number{font:22px var(--serif);color:var(--accent);min-width:28px}.step-list p{margin:0}.step-list strong{font-weight:500;color:var(--ink)}.source-list{line-height:2;font-size:14px}.source-list a{color:var(--accent)}.editorial-view,.gallery-view{max-width:1250px;margin:auto;padding:50px 40px 65px;min-height:calc(100vh - 136px)}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:20px}.page-heading h1{font:36px var(--serif);letter-spacing:4px;margin-top:10px}.page-heading p{font-size:14px;color:var(--muted);margin-top:12px}.inspiration-feature{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.inspiration-feature>img{width:100%;max-height:620px;object-fit:cover;border-radius:5px}.inspiration-copy h2{font:34px var(--serif);line-height:1.6;letter-spacing:4px;margin:14px 0 25px}.inspiration-copy>p{font-size:16px;line-height:2;color:var(--muted);max-width:400px}.principles{display:grid;gap:20px;margin:28px 0}.principles>div{border-top:1px solid var(--line);padding-top:16px;display:flex;gap:20px}.principles b{font:23px var(--serif);color:var(--accent)}.principles h3{font-size:15px}.principles p{font-size:13px;color:var(--muted);margin-top:4px}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.art-card{background:#f2f1e9;border:1px solid var(--line);border-radius:6px;overflow:hidden}.art-card>img{display:block;aspect-ratio:1;width:100%;object-fit:cover}.art-card-content{padding:16px 18px}.art-card h2{font:20px var(--serif)}.art-card p{font-size:12px;color:var(--muted);margin:6px 0 12px}.art-card-actions{display:flex;gap:15px;border-top:1px solid var(--line);padding-top:12px}.art-card-actions button{font-size:12px;padding:4px 0}.art-card-actions button:last-child{margin-left:auto;color:var(--muted)}.empty-gallery{border:1px dashed #bdc5af;padding:70px 25px;text-align:center;border-radius:7px}.empty-gallery h2{font:26px var(--serif);margin-bottom:12px}.empty-gallery p{color:var(--muted);margin-bottom:25px;font-size:14px}.file-note{font-size:12px!important;line-height:1.7!important}.share-field{width:100%;font-size:13px;padding:12px;border:1px solid var(--line);border-radius:4px;background:#eeeee6;color:var(--ink)}.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}[hidden]{display:none!important}
@media(min-width:1550px){.studio-layout{grid-template-columns:270px minmax(500px,1fr) 302px}.material-panel,.design-panel{padding:32px 28px}.material-card img{height:135px}.stage{max-height:calc(100vh - 275px);max-width:calc(100vh - 275px)}}
@media(max-width:1150px){.masthead{padding:0 22px}.brand-name small{display:none}.main-nav{gap:24px}.header-actions{gap:16px}.studio-layout{grid-template-columns:202px minmax(300px,1fr) 242px}.material-panel,.design-panel{padding:24px 18px}.workspace{padding:24px 20px 0}.save-state{display:none}.material-card img{height:98px}.work-title input{width:225px}.mood-options{gap:5px}.mood-options button{padding:6px 9px}.stage{min-width:0;min-height:0}.panel-heading h1,.panel-heading h2{font-size:21px}}
@media(max-width:900px){.masthead{height:76px;padding:0 20px;gap:15px}.brand-name{font-size:23px;letter-spacing:3px}.seal{height:35px;width:30px;font-size:24px}.main-nav{gap:18px}.header-actions>.header-new{display:inline-flex}.studio-layout{grid-template-columns:190px minmax(0,1fr)}.design-panel{grid-column:1/-1;border-top:1px solid var(--line);border-left:0;display:grid;grid-template-columns:1fr 1fr;gap:0 30px;padding:25px}.design-panel>.panel-heading{grid-column:1}.design-panel>#selection-controls,.design-panel>#selected-empty{grid-column:1;grid-row:2/7}.design-panel>.section-rule,.design-panel>.creative-tip{display:none}.design-panel>.label-with-meta{grid-column:2;grid-row:1}.mood-options{grid-column:2;align-self:start;grid-row:2}.design-panel>textarea{grid-column:2;grid-row:3}.generation-box{grid-column:2;grid-row:4/8;margin-top:18px}.generation-box>p:not(.eyebrow),.generation-box>.eyebrow{display:none}.generation-box h3{font-size:18px}.generation-box .button{margin-top:10px}.stage{max-height:none;max-width:none}.workspace{padding-bottom:0}.workspace-heading .eyebrow{font-size:8px}.stage-bottom{min-height:60px}.material-card img{height:102px}.material-foot{margin-top:15px}.material-panel{padding-bottom:15px}.source-link{margin-top:12px}.footer>span:last-child{display:none}.gallery-grid{grid-template-columns:repeat(2,1fr)}.inspiration-feature{gap:35px}.inspiration-copy h2{font-size:26px}.inspiration-copy>p{font-size:14px}}
@media(max-width:600px){.masthead{height:auto;min-height:108px;padding:14px 16px 0;display:grid;grid-template-columns:1fr auto;gap:10px}.brand{gap:8px}.brand-name small{display:block;font-size:9px;letter-spacing:2px;padding-left:10px}.brand-name{font-size:24px}.header-actions{grid-column:2;grid-row:1}.header-actions .button{font-size:12px;padding:8px 11px;min-height:35px}.main-nav{grid-column:1/-1;grid-row:2;height:41px;gap:30px;justify-content:center}.nav-button{font-size:13px}.studio-layout{display:flex;flex-direction:column}.workspace{order:0;padding:20px 16px 0}.workspace-heading{margin-bottom:15px}.workspace-heading .eyebrow{font-size:8px}.work-title input{font-size:23px;width:230px}.save-state{display:block;font-size:10px}.stage{width:100%;max-width:100%;min-height:0}.stage-tools{left:9px;top:9px;padding:2px}.stage-tools .icon-button{width:30px;height:30px}.scene-label{font-size:10px}.scene-caption small{font-size:6px}.scene-caption>span{font-size:16px}.stage-bottom{min-height:58px}.material-panel{order:1;border-right:0;border-top:1px solid var(--line);padding:20px 16px}.panel-heading{margin-bottom:15px}.panel-heading h1,.panel-heading h2{font-size:21px;margin-top:4px}.material-panel .panel-heading .eyebrow{font-size:9px}.material-tabs{width:180px;position:absolute;right:16px;margin-top:-49px}.material-tabs button{font-size:12px;padding:6px}.tiny-index{display:none}.material-grid{display:flex;overflow-x:auto;gap:10px;padding-bottom:7px;scrollbar-width:thin}.material-card{min-width:105px;padding-bottom:8px}.material-card img{height:100px}.material-foot,.source-link{display:none}.design-panel{order:2;display:block;padding:24px 20px}.selected-material{margin-bottom:16px}.design-panel>#selection-controls{display:grid;grid-template-columns:1fr 1fr;column-gap:25px}.selected-material{grid-column:1/-1}.slider-label[for=angle]{grid-column:1;grid-row:2}.slider-label[for=size]{grid-column:2;grid-row:2}#angle{grid-column:1;grid-row:3}#size{grid-column:2;grid-row:3}.slider-label[for=trim]{grid-column:1;grid-row:4}#trim{grid-column:1;grid-row:5}.adjust-actions{grid-column:2;grid-row:4/6;align-self:end;margin:0}.design-panel>.section-rule{display:block}.label-with-meta{margin-top:24px}.mood-options button{font-size:14px;padding:7px 18px}.design-panel>textarea{font-size:14px;min-height:80px}.generation-box{margin-top:22px}.generation-box>small{font-size:12px}.generation-box .button{min-height:48px}.generation-box h3{font-size:23px}.footer{padding:18px 20px}.editorial-view,.gallery-view{padding:30px 20px}.page-heading{display:block}.page-heading h1{font-size:30px}.page-heading .button{margin-top:18px}.gallery-grid{grid-template-columns:1fr}.inspiration-feature{grid-template-columns:1fr;gap:28px}.inspiration-feature>img{max-height:500px}.export-preview{grid-template-columns:120px 1fr;gap:16px}dialog{padding:20px}dialog h2{font-size:25px}.prompt-area{height:210px}.export-preview p{font-size:12px}.modal-actions .button{flex:1}.selection-empty{height:150px}.scene-picker,.stage-bottom .text-button{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Quiet but legible studio labels. */
.eyebrow,.workspace-heading .eyebrow,.panel-heading .eyebrow{font-size:12px;letter-spacing:1.1px}.brand-name small,.tiny-index,.material-card small,.material-foot p,.source-link,.save-state,.scene-caption small,.stage-hint,.stage-bottom .text-button,.selected-material .eyebrow,.slider-label output,.label-with-meta>span,.generation-box>small,.footer,.footer>span:last-child{font-size:12px}.slider-label,.adjust-actions button,.mood-options button,textarea,.creative-tip p,.generation-box>p:not(.eyebrow),.scene-picker{font-size:14px}.generation-box .eyebrow{font-size:11px;letter-spacing:.7px}.material-card small{font-size:11px}.workspace-heading .eyebrow{font-size:10px}.scene-caption small{font-size:9px}.scene-caption>span{font-size:19px}.brand-name small{font-size:11px}.footer>span:last-child{font-size:10px}.generation-box>small{font-size:11px}.panel-heading .eyebrow{font-size:10px}.design-panel{padding-bottom:27px}.art-card-actions button{font-size:14px}.art-card p,.principles p{font-size:14px}
@media(max-width:600px){.save-state{display:none}.workspace-heading .eyebrow{font-size:10px}.material-card small{font-size:11px}.scene-caption small{font-size:8px}.stage-bottom .text-button,.scene-picker{font-size:12px}.material-card{min-width:112px}.generation-box>small{font-size:12px}.material-tabs{margin-top:-47px}}
.mood-options button{flex:1;min-width:0;white-space:nowrap;padding:7px 0}.material-card small{font-size:12px;display:block;line-height:1.5;white-space:nowrap}.material-card img{margin-bottom:9px}.stage-shell{flex:0 0 auto}.creative-tip{display:none}.generation-box{margin-top:23px}.section-rule{margin:21px 0}.slider-label{margin-top:14px}.selected-material{margin-bottom:15px}.generation-box .eyebrow{display:none}.generation-box h3{margin-top:0}.stage-bottom{align-self:center}.material-card small{color:#626960}.source-list a{overflow-wrap:anywhere}.mood-options button.active{color:#4c593d}.footer,.save-state,.stage-hint{color:#626960}
@media(max-width:600px){.mood-options button{padding:8px 0}.material-card small{font-size:12px}}
/* The second studio adds specimen choices and local, reversible pruning. */
.material-card img,.selected-material>img,.variant-card img{mix-blend-mode:normal;filter:none}.material-card small{white-space:normal;font-size:12px}.material-filters{display:flex;gap:5px;margin-bottom:14px}.material-filters button{font-size:13px;padding:5px 10px;border-radius:4px;color:var(--muted)}.material-filters button.active{background:#e6eade;color:var(--ink)}.material-count{font-size:12px}.tiny-index{font-size:11px;letter-spacing:0}.specimen-image{width:100%;height:100%;display:block;pointer-events:none}#prune-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:350;pointer-events:none}.stage[data-tool=split],.stage[data-tool=brush]{cursor:crosshair}.stage[data-tool=split] .stem,.stage[data-tool=brush] .stem{pointer-events:none}.stage[data-tool=split] .stem:not(.selected),.stage[data-tool=brush] .stem:not(.selected){opacity:.4}.stage[data-tool=split] .vessel,.stage[data-tool=brush] .vessel{opacity:.65}.stage{background:radial-gradient(ellipse at 28% 22%,#f5f4ef 0%,#e7e8df 58%,#dedfd7 100%)}.stage-grain{opacity:.07}.variant-trigger{width:100%;border:1px solid var(--line);border-radius:5px;padding:10px 12px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;background:#eef0e7}.variant-trigger small{display:block;color:var(--muted);font-size:12px}.variant-trigger strong{display:block;font-size:14px;font-weight:500;margin-top:3px}.variant-trigger>span:last-child{font-size:12px;white-space:nowrap;color:var(--accent)}.variant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 6px}.variant-card{border:1px solid var(--line);border-radius:6px;padding:15px 10px;background:#f0f0e9;min-width:0;text-align:center}.variant-card:hover,.variant-card.active{border-color:#899b75;background:#e7ebdf}.variant-card img{width:100%;height:220px;object-fit:contain;display:block;margin-bottom:12px}.variant-card strong{display:flex;justify-content:center;align-items:center;gap:7px;font-size:15px;font-weight:500}.variant-card strong i{width:12px;height:12px;border:1px solid #3332;border-radius:50%;flex-shrink:0}.variant-card>span{display:block;font-size:13px;color:var(--muted);margin-top:4px}.range-control{margin:0 0 14px}.slider-label{margin-top:0}.prune-controls{border:1px solid var(--line);border-radius:5px;padding:12px;margin-top:18px}.prune-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}.prune-heading strong{font-size:14px;font-weight:500}.prune-heading button{font-size:12px;text-decoration:underline;text-underline-offset:3px;color:var(--muted);padding:0}.prune-modes{display:flex;gap:7px}.prune-modes button{display:flex;gap:5px;align-items:center;justify-content:center;flex:1;border:1px solid var(--line);border-radius:4px;padding:8px 3px;font-size:12px;white-space:nowrap}.prune-modes button.active{border-color:var(--accent);background:#a5533e10;color:var(--accent)}.prune-modes svg{width:15px;height:15px}#prune-help{font-size:12px;line-height:1.7;color:var(--muted);margin-top:9px}#brush-setting{font-size:12px;display:flex;align-items:center;gap:8px;margin-top:12px}#brush-setting input{width:100px;flex:1}.generation-mode-label{display:block;font-size:14px;margin:20px 0 8px}#generation-mode{width:100%;border:1px solid #bac3ab;background:#edf0e5;border-radius:5px;padding:10px;color:var(--ink);font:14px var(--sans)}#generation-mode-help{font-size:12px;line-height:1.75;color:var(--muted);margin-top:8px}.selection-empty{height:220px}.generation-box{margin-top:20px}.generation-box h3{font-size:19px}.stage-tools .tool-separator{margin:0 1px}
@media(min-width:901px){.studio-layout{height:calc(100dvh - 135px);min-height:650px}.material-panel{display:flex;flex-direction:column;overflow:hidden}.material-panel>.panel-heading,.material-tabs,.material-filters,.color-filter-bar,.source-link{flex-shrink:0}.material-grid{overflow-y:auto;min-height:0;align-content:start;padding-right:3px;scrollbar-width:thin;scrollbar-color:#c2c9b6 transparent}.material-card img{height:110px}.material-foot{display:none}.design-panel{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c2c9b6 transparent}.stage{max-height:calc(100dvh - 315px);max-width:calc(100dvh - 315px)}.stage-shell{flex:0 0 auto;max-height:calc(100dvh - 315px)}.stage-tools{left:max(14px,calc((100% - (100dvh - 315px))/2 + 14px))}.source-link{margin-top:14px}.workspace-heading{margin-bottom:18px}.stage-bottom{min-height:55px}.generation-box .button{margin-top:12px}.design-panel>.panel-heading{margin-bottom:18px}.section-rule{margin:22px 0}.selected-material{margin-bottom:12px}}
@media(min-width:601px) and (max-width:900px){.design-panel{display:block}.design-panel>*{break-inside:avoid}.design-panel>#selection-controls{break-inside:avoid}.design-panel>.section-rule{display:block}.design-panel>.label-with-meta{margin-top:20px}.material-grid{max-height:580px;overflow:auto}.stage-tools{left:10px;top:10px}}
@media(max-width:600px){.design-panel>#selection-controls{display:block}.range-control{margin-bottom:18px}.slider-label{margin:0 0 8px}.variant-trigger{margin-bottom:21px}.adjust-actions{margin-top:14px}.prune-modes button{font-size:14px;padding:10px}.prune-controls{margin:20px 0 0}.material-tabs{margin-top:-51px}.material-filters{margin-top:4px}.variant-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.variant-card img{height:180px}.stage-tools{left:8px;top:8px;padding:3px}.stage-tools .icon-button{width:27px;height:30px}.stage[data-tool=split]~.stage-tools,.stage[data-tool=brush]~.stage-tools{opacity:1}#generation-mode{font-size:16px}.generation-mode-label{margin-top:22px}.generation-box h3{font-size:23px}}
@media(min-width:901px){.material-grid{grid-auto-rows:180px;flex:1}.material-card{min-height:174px}.material-card strong{font-size:14px}.material-card img{height:110px}}

.material-card.active{border-color:#7b8c68;background:#e7ebdf;box-shadow:inset 0 0 0 1px #7b8c6830}#vessel-filters{gap:2px}#vessel-filters button{padding-left:7px;padding-right:7px}

.insert-position{border:0;margin:20px 0 2px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}.insert-position legend{font-size:13px;color:var(--muted);margin-bottom:9px}.insert-position button{border:1px solid var(--line);border-radius:6px;padding:11px 13px;text-align:left;background:#f1f1ea;transition:.16s ease}.insert-position button:hover,.insert-position button.active{border-color:#899b75;background:#e5eadc;box-shadow:inset 0 0 0 1px #899b7530}.insert-position strong{font-size:14px;font-weight:500;display:block}.insert-position small{font-size:12px;color:var(--muted);display:block;margin-top:3px}
.layer-menu{position:absolute;z-index:500;width:min(258px,calc(100% - 20px));max-height:min(470px,calc(100% - 20px));overflow:hidden;background:#f6f5efee;border:1px solid #aeb7a2;border-radius:8px;box-shadow:0 18px 55px #28302735;backdrop-filter:blur(10px);color:var(--ink);cursor:default}.layer-menu-heading{display:flex;align-items:flex-start;justify-content:space-between;padding:13px 12px 10px 15px;border-bottom:1px solid var(--line)}.layer-menu-heading strong{font:17px var(--serif);letter-spacing:1px}.layer-menu-heading small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.layer-menu-heading .icon-button{width:28px;height:28px}.layer-list{padding:7px;max-height:330px;overflow:auto;scrollbar-width:thin}.layer-row{position:relative;display:grid;grid-template-columns:15px minmax(0,1fr) auto;align-items:center;gap:5px;border:1px solid transparent;border-radius:5px;min-height:48px;padding:3px 4px 3px 3px;background:transparent}.layer-row+.layer-row{margin-top:3px}.layer-row:hover{background:#e9ebe2}.layer-row.active{border-color:#98a589;background:#e4e8dc}.layer-row.dragging{opacity:.42}.layer-row.drop-before:before,.layer-row.drop-after:after{content:"";position:absolute;left:4px;right:4px;height:2px;background:var(--accent);border-radius:2px}.layer-row.drop-before:before{top:-3px}.layer-row.drop-after:after{bottom:-3px}.layer-grip{font-size:16px;color:#92988c;cursor:grab;line-height:1}.layer-row:active .layer-grip{cursor:grabbing}.layer-select{min-width:0;display:flex;align-items:center;gap:8px;text-align:left}.layer-select img{width:38px;height:42px;object-fit:contain;background:#ecece5;border-radius:3px}.layer-select>span{min-width:0}.layer-select strong,.layer-select small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-select strong{font-size:13px;font-weight:500}.layer-select small{font-size:11px;color:var(--muted);margin-top:2px}.layer-step{display:flex;gap:2px}.layer-step button{width:25px;height:27px;border:1px solid #c2c8ba;border-radius:4px;font-size:14px;color:#5f6858;background:#f7f6f1}.layer-step button:hover:not(:disabled){border-color:#849276;background:#fff}.layer-step button:disabled{opacity:.26;cursor:not-allowed}.layer-menu-tip{font-size:11px;line-height:1.55;color:var(--muted);padding:8px 14px 11px;border-top:1px solid var(--line)}.layer-empty{font-size:12px;color:var(--muted);padding:22px 10px;text-align:center}
@media(max-width:600px){.insert-position{margin-top:16px}.insert-position button{padding:10px}.insert-position small{font-size:11px}.layer-menu{width:min(250px,calc(100% - 16px));max-height:calc(100% - 16px)}.layer-list{max-height:260px}.layer-menu-tip{display:none}.layer-step button{width:29px;height:31px}}
.export-preview-v3{grid-template-columns:minmax(300px,1.45fr) minmax(180px,1fr);align-items:center}.reference-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}.reference-pair figure{margin:0;min-width:0}.reference-pair img{display:block;aspect-ratio:1;object-fit:cover}.reference-pair figcaption{text-align:center;font-size:11px;letter-spacing:.08em;color:var(--muted);margin-top:6px}.export-preview-v3>div:last-child>strong{font:18px var(--serif)}
@media(max-width:600px){.export-preview-v3{grid-template-columns:1fr}.reference-pair{max-width:330px}.reference-pair figcaption{font-size:10px}.export-preview-v3>div:last-child{margin-top:3px}}

@media(max-width:680px){.masthead{height:auto;min-height:108px;padding:14px 16px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}.brand{gap:8px}.brand-name{font-size:24px}.brand-name small{display:block;font-size:9px;letter-spacing:2px;padding-left:10px}.header-actions{grid-column:2;grid-row:1;gap:7px}.main-nav{grid-column:1/-1;grid-row:2;height:41px;gap:30px;justify-content:center}.nav-button{font-size:13px}.header-new,.language-toggle,#save-button{width:34px;min-width:34px;height:34px;min-height:34px;padding:0}.header-new{border:1px solid #c9cbbf;border-radius:50%}.header-new>span:last-child,#save-button>span:last-child{display:none}}
@media(max-width:360px){.masthead{padding-left:10px;padding-right:10px}.brand-name{font-size:22px;letter-spacing:2px}.brand-name small{display:none}.main-nav{gap:18px}.header-actions{gap:5px}}

/* Quiet, contextual affordances for vessel systems and touch editing. */
#fixture-layer{position:absolute;inset:0;width:100%;height:100%;z-index:210;pointer-events:none;overflow:visible}
#fixture-layer>canvas,#fixture-layer>img,#fixture-layer>svg{display:block;width:100%;height:100%;pointer-events:none}
.composition-front{z-index:230}
#prune-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:350;pointer-events:none}
.layer-vessel-divider{display:flex;align-items:center;gap:8px;padding:7px 5px;color:var(--muted);font-size:10px;letter-spacing:.04em}
.layer-vessel-divider:before,.layer-vessel-divider:after{content:'';height:1px;flex:1;background:var(--line)}
.adjust-actions{grid-template-columns:1fr 1fr}
.adjust-actions button{min-height:36px}

#vessel-filters:not([hidden])~.material-grid .material-card strong{line-height:1.35}
#vessel-filters:not([hidden])~.material-grid .material-card :is(small,.vessel-meta){display:-webkit-box;min-height:1.35em;margin-top:3px;padding:0 3px;overflow:hidden;color:#626960;font-size:11px;line-height:1.35;letter-spacing:.01em;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#vessel-filters:not([hidden])~.material-grid .material-card.active{border-color:#a4ad9b;background:#eef0e8;box-shadow:none}
#vessel-filters:not([hidden])~.material-grid .material-card.active :is(small,.vessel-meta){color:#515b4f}

html[lang=en] .scene-label{top:auto;right:7%;bottom:6.5%;max-width:46%;writing-mode:horizontal-tb;color:#7f8379;font-family:var(--sans);font-size:8px;line-height:1;letter-spacing:.14em;text-align:right;white-space:nowrap;opacity:.78}
html[lang=en] .stage[data-scene=night] .scene-label{color:#d5d7ce;opacity:.68}

.gesture-feedback{position:absolute;left:var(--gesture-x,50%);top:var(--gesture-y,50%);z-index:360;display:grid;width:64px;height:64px;place-items:center;border:1px solid #7d896fb8;border-radius:50%;background:#f7f6f1b8;box-shadow:0 4px 18px #2e392a14;color:#4f5a49;font:600 11px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.03em;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.94);transition:opacity .12s ease,transform .12s ease}
.gesture-feedback::before{content:"";position:absolute;inset:-5px;border-top:1px solid #a5533eb3;border-right:1px solid #a5533e5c;border-radius:50%;transform:rotate(-28deg)}
.gesture-feedback>span,.gesture-feedback>output{position:relative;padding:3px 6px;border-radius:999px;background:#f7f6f1d9}
.gesture-feedback.active,.gesture-feedback.visible,.gesture-feedback[data-active=true]{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media(max-width:600px){
 .stage-tools{left:50%;top:6px;max-width:calc(100% - 4px);padding:2px 1px;gap:0;overflow-x:auto;flex-wrap:nowrap;transform:translateX(-50%);scrollbar-width:none}
 .stage-tools::-webkit-scrollbar{display:none}
 .stage-tools .icon-button{flex:0 0 40px;width:40px;height:40px}
 .stage-tools .tool-separator{flex:0 0 1px;width:1px;height:16px;margin:0;opacity:.72}
 #vessel-filters:not([hidden])~.material-grid .material-card :is(small,.vessel-meta){font-size:11px}
 html[lang=en] .scene-label{right:6%;bottom:6%;max-width:48%;font-size:7px;letter-spacing:.12em}
 .gesture-feedback{width:60px;height:60px}
}
.botanical-note{font-size:12px;line-height:1.75;color:var(--muted);margin:12px 0 18px;max-width:30em}
.stem-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:18px 0 12px;padding:0 0 2px}
.stem-details summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;padding:14px 0;font-size:13px;color:var(--ink)}
.stem-details summary::-webkit-details-marker{display:none}.stem-details[open] summary>span:last-child{transform:rotate(45deg)}
.stem-details .prune-controls{margin-bottom:12px}.stem-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.study-entry{display:block;text-align:left;color:var(--ink);font-size:13px;border:0;border-top:1px solid var(--line);padding:14px 0 7px;width:100%;background:none}
.study-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:36px}
.study-card{min-width:0}.study-image{position:relative;aspect-ratio:1;background:#eaece3;display:grid;place-items:center;overflow:hidden;border-radius:2px}
.study-image img{width:100%;height:100%;object-fit:cover}.study-image img[hidden]{display:none}.study-number{position:absolute;top:15px;left:17px;font-size:11px;letter-spacing:2px;color:#646b5d}.study-loading{padding:24px;text-align:center;font-size:13px;color:var(--muted)}
.study-content{padding:23px 0 0}.study-content .eyebrow{font-size:10px;letter-spacing:1px;line-height:1.7}.study-content h2{font:27px var(--serif);font-weight:400;margin:12px 0;letter-spacing:1px}.study-content>p:not(.eyebrow){font-size:14px;line-height:1.85;color:var(--muted);min-height:78px;margin:0 0 20px}.study-content .button{width:100%;justify-content:space-between}.study-source{font-size:12px;color:var(--muted);line-height:1.9;max-width:850px;margin:38px 0 0;padding-top:22px;border-top:1px solid var(--line)}
@media(max-width:760px){.study-grid{grid-template-columns:1fr;gap:38px;margin-top:25px}.study-content{padding-top:18px}.study-content>p:not(.eyebrow){min-height:0}.study-content h2{font-size:25px}.study-source{margin-top:30px}.botanical-note{max-width:none}.study-entry{padding:10px 0}.study-image{max-height:540px}}

/* Keep the small library filters on readable lines in both languages. */
#material-filters{flex-wrap:wrap;gap:4px}#material-filters button{white-space:nowrap;padding:5px 7px;font-size:12px;flex-shrink:0}
.material-card small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}

/* Layer controls live outside the artwork, in the inspector or below the canvas. */
.layer-menu{position:static;z-index:auto;width:100%;max-height:none;margin:0 0 24px;background:#f6f5ef;border:1px solid var(--line);box-shadow:none;backdrop-filter:none;border-radius:5px}
.layer-menu[hidden]{display:none}.layer-menu-heading{padding:12px 10px}.layer-menu-heading strong{font-size:15px;letter-spacing:0}.layer-list{max-height:255px}.layer-menu-tip{margin:0;padding:8px 10px;display:block}.layer-select img{width:28px;height:36px}.layer-grip{font-size:15px}.layer-select{gap:5px}.layer-row{gap:3px;grid-template-columns:12px minmax(0,1fr) auto}.layer-step button{width:22px}
@media(max-width:900px){.workspace>.layer-menu{margin:18px 0 0}.workspace>.layer-menu .layer-list{max-height:210px}.layer-select img{width:34px;height:39px}.layer-step button{width:32px;height:34px}}

.material-search{width:100%;border:0;border-bottom:1px solid var(--line,#ddd);background:transparent;padding:12px 2px;margin:0 0 16px;font:inherit;font-size:12px;outline-offset:4px}.material-filters{flex-wrap:wrap}

html[lang="en"] .mood-options{flex-wrap:wrap}html[lang="en"] .mood-options button{flex:1 0 calc(50% - 7px)}

/* Each script uses native glyph forms; compact controls stay on one line. */
html[lang="ja"]{--serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif JP",serif;--sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans CJK JP","Noto Sans JP",sans-serif}
html[lang="en"]{--serif:Georgia,"Times New Roman",serif}
.brand-word{white-space:nowrap}
html[lang="en"] .brand-name{font-size:22px;letter-spacing:2px}
select{font:inherit}
.language-picker{display:inline-flex;align-items:center;flex:none}
#language-select{height:34px;min-width:102px;padding:0 8px;border:1px solid #c9cbbf;border-radius:18px;background:#f4f3ed;color:var(--ink);font-family:var(--sans);font-size:12px;line-height:1;cursor:pointer}
#language-select:hover{background:#e7eadf}
#language-select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.header-actions,.header-actions>*,.brand-name{min-width:0}
.button,.text-button,.adjust-actions button,.prune-modes button,.material-tabs button,.material-filters button,.study-filters button{white-space:nowrap}

/* The canvas and its inspector form one workspace. Every primary editing control stays beside the work. */
.workspace>.design-panel{width:100%;max-width:760px;min-width:0;margin:0 0 24px;padding:18px 20px 20px;border:1px solid #d7dacf;border-radius:9px;background:#f7f7f2;box-shadow:0 8px 25px #2833270b}
.workspace>.design-panel>.panel-heading{margin:0 0 14px;gap:10px}.workspace>.design-panel>.panel-heading h2{font-size:19px;margin:0;letter-spacing:.04em}
.editor-tabs{display:flex;flex:none;gap:2px;padding:3px;border-radius:8px;background:#e9ece4}.editor-tabs button{min-width:54px;padding:7px 9px;border-radius:6px;font-size:12px;white-space:nowrap;color:#626c5d;transition:background .15s ease,box-shadow .15s ease}.editor-tabs button[aria-selected=true]{background:#fff;color:#303931;box-shadow:0 1px 5px #1f2d211c}
.design-panel[data-editor-tab=shape]>.label-with-meta,.design-panel[data-editor-tab=shape]>.mood-options,.design-panel[data-editor-tab=shape]>textarea,.design-panel[data-editor-tab=shape]>.generation-mode-label,.design-panel[data-editor-tab=shape]>#generation-mode,.design-panel[data-editor-tab=shape]>#generation-mode-help,.design-panel[data-editor-tab=shape]>.generation-box{display:none!important}
.design-panel[data-editor-tab=create]>#selected-empty,.design-panel[data-editor-tab=create]>#selection-controls{display:none!important}
.workspace>.design-panel>.section-rule,.workspace>.design-panel>.creative-tip{display:none!important}
.workspace>.design-panel .botanical-note{margin:5px 0 8px}.workspace>.design-panel .selected-material{margin-bottom:10px}.workspace>.design-panel .variant-trigger{margin-bottom:6px}.workspace>.design-panel .slider-label{margin:9px 0 5px}.workspace>.design-panel .range-control{margin-bottom:5px}.workspace>.design-panel .real-size{margin:5px 0}.workspace>.design-panel .adjust-actions{margin-top:12px}.workspace>.design-panel .stem-details{margin:10px 0 5px}
.workspace>.design-panel .generation-box{margin-top:16px}.workspace>.design-panel .generation-box .button{margin:12px 0 5px}.workspace>.design-panel .label-with-meta{margin-bottom:9px}
.stage-shell{flex-direction:column;align-items:center;justify-content:flex-start;max-height:none!important}.stage-shell.has-cut-choice{padding-bottom:0}.stage-shell>.stage{flex:none}.stage-shell>.stage-bottom{flex:none;max-width:none}.workspace>.layer-menu{position:static;width:100%;max-width:760px;max-height:none;margin:0 0 20px;border-radius:9px;background:#f7f7f2;box-shadow:0 8px 25px #2833270b;backdrop-filter:none}.workspace>.layer-menu .layer-list{max-height:min(56dvh,380px)}
.cut-choice{position:relative;z-index:1;width:min(100%,608px);display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px auto 0;padding:11px 13px 11px 16px;border:1px solid #b8c4af;border-radius:11px;background:#f9faf6;box-shadow:0 9px 28px #21301f16}
.cut-choice-copy{min-width:0;flex:1 1 140px}.cut-choice-copy strong,.cut-choice-copy small{display:block}.cut-choice-copy strong{font-size:13px;font-weight:600}.cut-choice-copy small{margin-top:2px;color:#687365;font-size:12px}.cut-piece-picker{display:flex;flex:none;gap:2px;padding:3px;border-radius:8px;background:#e8ece4}.cut-piece-picker button{min-width:32px;min-height:32px;padding:3px 7px;border-radius:6px;font-size:12px}.cut-piece-picker button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #1825151d;color:#8e4a39}.cut-choice-actions{display:flex;gap:6px;flex:none}.cut-choice-actions button{padding:8px 9px;border:1px solid #ccd3c5;border-radius:7px;background:#fff;font-size:12px;white-space:nowrap}.cut-choice-actions #cut-delete:not(:disabled){border-color:#b56a56;color:#924c3d}.cut-choice-actions #cut-keep{background:#e7ecdf;border-color:#aabb9d}
.stem.fresh-cut.selected:after{border-color:#a5533eaa;border-style:solid}.stage[data-tool=split]{cursor:crosshair}.stage[data-tool=split] .stem{cursor:crosshair}
@media(min-width:901px){.studio-layout{grid-template-columns:minmax(202px,250px) minmax(0,1fr)}.workspace{display:grid;grid-template-columns:minmax(320px,1fr) minmax(260px,320px);grid-template-rows:64px auto;column-gap:18px;justify-items:stretch;align-items:start;padding-bottom:22px}.workspace-heading{grid-column:1;grid-row:1;max-width:none}.stage-shell{grid-column:1;grid-row:2;max-width:none}.workspace>.design-panel,.workspace>.layer-menu{grid-column:2;grid-row:1/3;position:sticky;top:16px;max-width:none;margin:0}.stage{max-width:calc(100dvh - 266px)}.workspace>.design-panel .botanical-note{display:none}}
@media(max-width:900px){.workspace>.layer-menu{order:2;margin:10px 0 18px}.workspace>.design-panel{display:block;order:3}.workspace>.design-panel>.panel-heading{display:flex}.workspace>.design-panel #selection-controls{display:block}}
.layer-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:11px 10px 10px;border-bottom:1px solid var(--line)}
.layer-quick-actions button{min-width:0;min-height:38px;padding:7px 5px;border:1px solid #d7dbd0;border-radius:6px;background:#fbfbf7;color:#4d5a4c;font-size:12px;white-space:nowrap;transition:background .18s,border-color .18s}
.layer-quick-actions button:hover:not(:disabled){background:#ebefe7;border-color:#a5b19b}
.layer-quick-actions button[aria-pressed=true]{background:#e7ece2;border-color:#8e9f87;color:#354734}
.layer-quick-actions button:disabled{opacity:.38}
.stage.focus-other-layers .stem:not(.selected) .specimen-image{filter:blur(2.5px);opacity:.27}
.stage.focus-other-layers .vessel,.stage.focus-other-layers #fixture-layer{filter:blur(2px);opacity:.4}
.stage[data-tool=brush] .stem:not(.selected){opacity:.78}.stage[data-tool=split] .stem:not(.selected){opacity:.55}
.stage[data-tool=brush] .vessel{opacity:.88}
@media(max-width:600px){.workspace>.design-panel{margin:0 0 18px;padding:16px}.workspace>.design-panel .selected-material{margin-bottom:8px}.workspace>.design-panel .range-control{margin-bottom:10px}.cut-choice{width:100%;display:grid;grid-template-columns:1fr auto;padding:11px 12px}.cut-choice-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.cut-choice-actions button{min-height:38px}}
.adjust-actions button{min-width:0;min-height:38px;padding:8px 4px;gap:4px;font-size:12px}
.adjust-actions button svg{flex:none}
.generation-box .button{gap:6px;padding-inline:12px;font-size:13px}
.modal-actions{flex-wrap:wrap}
.modal-actions .button{flex:1 1 auto;min-width:max-content}
.study-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 4px}
.study-filters button{border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:#f4f3ed;color:var(--muted);font-size:13px;line-height:1.2}
.study-filters button[aria-pressed="true"]{border-color:#8a9a7a;background:#e7ebdf;color:var(--ink)}
.study-filters button:hover{border-color:#8a9a7a}
.study-school{display:inline-block;margin:0 0 9px;color:#637358;font-size:11px;letter-spacing:.04em}
.study-source a{text-decoration-thickness:1px;text-underline-offset:3px}
.material-panel .panel-heading{display:block}
.material-panel .panel-heading .tiny-index{display:block;margin-top:2px;padding:0;line-height:1.4}
.workspace-heading>div{flex:1;min-width:0}
.work-title{width:100%;min-width:0}
.work-title input{width:100%;min-width:0}
.work-title span{flex:none}
.workspace-heading{align-items:flex-start}
.work-naming{width:100%;min-width:0}
.work-naming-label{display:block;width:max-content;max-width:100%;font-size:10px;line-height:1.2;letter-spacing:.12em;color:#788370;cursor:text}
.work-title{margin-top:1px;gap:7px}
.work-title input{min-width:0;width:100%;padding:1px 2px 2px 0;border-bottom:1px solid #adb5a4;font-size:22px;line-height:1.25;letter-spacing:.06em;transition:border-color .18s ease}
.work-title input::placeholder{color:#8b9689;opacity:1}
.work-title input:hover,.work-title input:focus{border-bottom-color:#6e816a}
.work-title input:focus-visible,.work-subtitle input:focus-visible{outline:2px solid #a5533e77;outline-offset:2px;border-radius:2px}
.work-title-edit{display:inline-flex;flex:none;align-items:center;gap:4px;margin-bottom:2px;padding:4px 5px;color:#77816f;font-size:11px;white-space:nowrap;cursor:text;transition:color .18s ease}
.work-title-edit:hover{color:var(--accent)}
.work-title-edit svg{width:13px;height:13px}
.work-subtitle{display:flex;align-items:center;gap:9px;min-width:0;margin-top:3px}
.work-subtitle label{flex:none;font-size:10px;color:#8c9387;white-space:nowrap;cursor:text}
.work-subtitle input{width:100%;min-width:0;padding:1px 0;border:0;border-bottom:1px solid transparent;background:transparent;color:#657060;font-family:var(--serif);font-size:12px;line-height:1.3;text-overflow:ellipsis}
.work-subtitle input::placeholder{color:#8c9589;opacity:1}
.work-subtitle input:hover,.work-subtitle input:focus{border-bottom-color:#aeb7a7}
.design-panel[data-editor-tab=shape]>.image-flow-intro{display:none!important}
.image-flow-intro{margin:-3px 0 13px;color:#6a7567;font-family:var(--serif);font-size:12px;line-height:1.6}
.editor-tabs button[data-editor-tab=create]{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.editor-tabs button[data-editor-tab=create]:before{content:'';width:5px;height:5px;border-radius:50%;background:#ac7460;box-shadow:0 0 0 3px #a5533e12}
.art-card .art-subtitle{font-family:var(--serif);font-size:13px;color:#687467;margin:3px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.export-preview .export-subtitle{margin:3px 0 8px;color:#697468;font-family:var(--serif);font-size:13px;line-height:1.6}
@media(min-width:901px){.workspace{grid-template-rows:88px auto;align-content:start}}
@media(min-width:901px){.workspace>.design-panel .generation-box>.eyebrow,.workspace>.design-panel .generation-box>p:not(.eyebrow){display:none}.workspace>.design-panel .generation-box{margin-top:13px;padding-top:12px}.workspace>.design-panel .generation-box h3{margin:3px 0 4px}}
@media(min-width:901px) and (max-width:1000px), (max-width:360px){.workspace>.design-panel>.panel-heading{flex-direction:column;align-items:stretch;gap:8px}.workspace>.design-panel>.panel-heading h2{white-space:nowrap}.workspace>.design-panel .editor-tabs{width:100%}.workspace>.design-panel .editor-tabs button{flex:1}}
@media(max-width:600px){.work-title input{width:100%;font-size:21px}.work-title-edit{font-size:10px}.work-subtitle{gap:6px}.work-subtitle input{font-size:12px}}
@media(max-width:680px){
 .brand-name small{display:none}
 #language-select{width:96px;min-width:96px;height:34px;padding:0 5px}
 .header-actions{gap:6px}
 .main-nav{gap:clamp(14px,6vw,30px)}
}
@media(max-width:360px){
 .brand-name{font-size:21px;letter-spacing:1px}
 .brand .seal{width:31px;height:34px;font-size:23px}
 html[lang="en"] .brand .seal{display:none}
 #language-select{width:90px;min-width:90px}
}
.real-size{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-2px 0 6px;font-size:12px;color:var(--muted)}
.real-size p{font-variant-numeric:tabular-nums;line-height:1.5}
#reseat-button{flex-shrink:0;border:1px solid var(--line);border-radius:4px;padding:5px 9px;font-size:12px;color:var(--ink);background:#f1f2ea}
#reseat-button:hover{border-color:#a5af94;background:#e8ebde}
.scale-warning{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 4px;padding:8px 10px;border-radius:4px;background:#a5533e10;color:#8c4633;font-size:12px;line-height:1.5}
.scale-warning button{font-size:12px;text-decoration:underline;text-underline-offset:3px;color:#8c4633;padding:0;white-space:nowrap}
.study-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:20px 0 4px}
.study-filter-bar .study-filters{margin:0}
.study-total{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.study-season{position:absolute;top:13px;right:15px;font:13px var(--serif);letter-spacing:2px;color:#646b5d;background:#f6f5efcc;border-radius:999px;padding:2px 9px}
.study-image img{transition:opacity .35s}
.study-school{display:inline-block;font-size:11px;letter-spacing:.8px;color:var(--accent);margin-bottom:6px}
@media(max-width:760px){.study-filter-bar{gap:10px}.study-total{margin-left:0}}

/* Canvas zoom changes the view only. The square artwork and its hit coordinates stay together. */
.canvas-viewport{position:relative;flex:none;width:100%;max-width:calc(100dvh - 315px);aspect-ratio:1;overflow:hidden;border:1px solid #e5e3d8;box-shadow:0 4px 22px #32362608}
.canvas-viewport>.stage{width:100%;height:100%;max-width:none!important;max-height:none!important;min-width:0;min-height:0;aspect-ratio:1;border:0;box-shadow:none;transform-origin:center center;will-change:transform}
.zoom-controls{position:absolute;z-index:402;right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;padding:4px;border:1px solid #d7dacf;border-radius:10px;background:#fafaf5ed;box-shadow:0 5px 16px #1e29151c;backdrop-filter:blur(10px)}
.zoom-controls button{width:37px;min-height:37px;border-radius:7px;font-size:22px;line-height:1;color:var(--ink)}.zoom-controls button:hover:not(:disabled){background:#e9ede4}.zoom-controls #zoom-reset{font-size:10px;font-variant-numeric:tabular-nums}.zoom-controls button:disabled{opacity:.35}
.prune-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.prune-modes button{min-width:0;min-height:42px;padding:7px 8px;white-space:normal;line-height:1.2}.prune-modes button span:last-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){.canvas-viewport{max-width:100%}.zoom-controls{position:static;transform:none;flex-direction:row;align-self:flex-end;margin:8px 0 -2px}.zoom-controls button{width:38px;min-height:36px}.zoom-controls #zoom-reset{width:48px}}

/* A compact, named scissors control remains visible beside the canvas on touch screens. */
#prune-tool,#erase-tool{display:inline-flex;flex-direction:column;gap:1px;padding:2px 0;border:1px solid #c5cdbf;background:#edf0e8;color:#53604f;line-height:1}
#prune-tool [data-icon] svg,#erase-tool [data-icon] svg{width:14px;height:14px;stroke-width:1.8}
#prune-tool .prune-tool-label,#erase-tool .prune-tool-label{display:block;font-size:9px;font-weight:600;letter-spacing:0;white-space:nowrap}
#prune-tool:hover,#erase-tool:hover{border-color:#9cae94;background:#e6ebdf}
#prune-tool[aria-pressed=true],#prune-tool[aria-pressed=true]:hover,#erase-tool[aria-pressed=true],#erase-tool[aria-pressed=true]:hover{border-color:#a5533e;background:#a5533e;color:#fff;box-shadow:0 2px 8px #7b3d2c36}
.layer-quick-actions #layer-quick-organize{grid-column:1/-1;background:#eef1e9;border-color:#c8d3c2;font-weight:600}
.layer-menu.compact .layer-row{min-height:43px;padding-block:3px}
.layer-menu.compact .layer-select img{height:30px;width:30px}
.layer-menu.compact .layer-select small{display:none}
@media(max-width:600px){.stage-tools .icon-button{flex-basis:36px;width:36px}#prune-tool [data-icon] svg,#erase-tool [data-icon] svg{width:16px;height:16px}#prune-tool .prune-tool-label,#erase-tool .prune-tool-label{font-size:10px}}
@media(max-width:600px){
 dialog.variant-modal{max-height:calc(100dvh - 20px);padding:14px 15px 18px}
 .variant-modal h2{font-size:21px;line-height:1.35;margin:7px 0}
 .variant-modal #modal-content>p:not(.file-note){font-size:12px;line-height:1.5;margin:5px 0}
 .variant-modal .insert-position{margin:10px 0 0}
 .variant-modal .insert-position button{padding:6px 8px}
 .variant-modal .variant-grid{margin:12px 0 5px;gap:8px}
 .variant-modal .variant-card{padding:8px 5px}
 .variant-modal .variant-card img{height:132px;margin-bottom:5px}
 .variant-modal .variant-card strong{font-size:12px}
 .variant-modal .variant-card>span{font-size:11px}
 .variant-modal .file-note{font-size:10px!important;line-height:1.5!important;margin:5px 0}
}
/* Stage layers painted by the export's own passes (app.js renderVesselLayers): the scene under everything, the inserted ends of stems behind the vessel, the front rim over stems in front. Until the scene paints, the CSS stage background, floor and vessel shadow stand in. */
#scene-layer,#interior-layer,#rim-layer{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#scene-layer{z-index:0}
/* B10 window light: the patch with the arrangement's shadow (app.js renderLightLayer), a small canvas scaled up and screened over the wall only; the room tone is in the scene layer. Hidden without a light. */
#light-layer{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;z-index:0;mix-blend-mode:screen;clip-path:inset(0 0 20.5% 0)}
.stage.has-light #light-layer{display:block}
#interior-layer{z-index:205}
#rim-layer{z-index:235}
/* On a kenzan the holder lies under the stems that stand on it (app.js renderVesselLayers, compositor paintInsertedPass). */
.stage.support-under #fixture-layer{z-index:204}
.stage.scene-painted .stage-floor{display:none}
.stage.scene-painted:not(.focus-other-layers) .vessel{filter:none}
/* Stem shadows from the export's LIGHT, on the unrotated containers (custom properties set in app.js; unset means none). */
#composition,#composition-front{filter:drop-shadow(var(--sx) var(--sy) var(--sb) var(--sc))}
.stage.focus-other-layers #interior-layer,.stage.focus-other-layers #rim-layer{filter:blur(2px);opacity:.4}
.stage[data-tool=split] #interior-layer,.stage[data-tool=brush] #interior-layer{opacity:.4}
.stage[data-tool=split] #rim-layer{opacity:.65}
.stage[data-tool=brush] #rim-layer{opacity:.88}
/* A9: picking follows the visible plant (stem-pick.js), so the grab cursor comes from the same test, not the stem's box. */
.stage[data-tool=move] .stem{cursor:inherit}
.stage[data-tool=move].over-stem{cursor:grab}
.stage[data-tool=move].over-stem:active{cursor:grabbing}
/* A10: keyboard focus on a stem (Tab) shows a ring; the dashed selection box stays for pointer selection. */
.stem:focus-visible:after{content:'';position:absolute;inset:-5px;border:2px solid var(--accent);border-radius:4px;pointer-events:none}
/* A9: cut and erase say what they act on and how to leave, over the canvas where the user is looking. DOM only, never exported.
 Phones: top centre (the toolbar sits under the canvas there); wider screens: bottom centre, clear of the toolbar at the top left. */
.mode-pill{position:absolute;z-index:405;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 20px);box-sizing:border-box;padding:5px 5px 5px 14px;border:1px solid #d3c1b6;border-radius:12px;background:#fbf9f4f0;box-shadow:0 6px 18px #2a30241f;color:var(--ink);font-size:13px;line-height:1.35;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mode-pill[hidden],.mode-pill-brush[hidden]{display:none}
.mode-pill-copy{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:1px;min-width:0;margin:0}
.mode-pill-copy strong{color:#a5533e;font-weight:600}
.mode-pill-copy small{color:#646b61;font-size:12px}
.mode-pill-brush{display:flex;flex:none;align-items:center;gap:1px;padding-left:6px;border-left:1px solid #e1dbd2}
.mode-pill-brush button{width:32px;height:32px;border-radius:8px;font-size:18px;line-height:1;color:var(--ink)}
.mode-pill-brush button:hover{background:#ece9e0}
.mode-pill-brush output{min-width:22px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:#4b5249}
.mode-pill-done{flex:none;min-height:34px;padding:4px 14px;border-radius:8px;background:#a5533e;color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.mode-pill-done:hover{background:#8f4532}
@media(max-width:600px){.mode-pill{top:8px;bottom:auto;gap:6px;max-width:calc(100% - 14px);padding:4px 4px 4px 11px;font-size:12px}.mode-pill-copy small{font-size:11px}.mode-pill-brush button{width:30px;height:32px}.mode-pill-done{min-height:32px;padding:4px 11px;font-size:12px}}
/* A11/B3: seat cues over the stage, DOM only (exports never include them). The selected stem's base dot sits where it stands
 (a cut piece: its cut end), above the vessel so a stem behind it still shows where to grab; stems out of the vessel get a
 terracotta ring. --mark-scale keeps the marks one size at any canvas zoom. */
.seat-marks{position:absolute;inset:0;z-index:340;pointer-events:none}
.base-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;box-sizing:border-box;border:1.5px solid #6f7b60;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px #f7f6f1d9,0 1px 3px #2a30241f;transform:scale(var(--mark-scale,1))}
.base-dot.floating{border:2px solid #a5533e;background:#fbf9f4;box-shadow:0 0 0 3px #a5533e2e,0 1px 3px #2a30241f}
.base-dot.floating:not(.selected){width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:transparent}
@media(pointer:coarse){.base-dot.selected:after{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid #6f7b6040;border-radius:50%;background:#6f7b6012}}
.stage[data-tool=move].over-stem.over-base{cursor:move}
.gesture-feedback.wide{width:auto;min-width:64px;height:30px;padding:0 3px;border-radius:999px;white-space:nowrap}
.gesture-feedback.wide::before{display:none}
.seat-banner{position:absolute;z-index:404;left:50%;bottom:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 20px);box-sizing:border-box;padding:4px 4px 4px 12px;border:1px solid #d3c1b6;border-radius:12px;background:#fbf9f4f0;box-shadow:0 6px 18px #2a30241f;color:var(--ink);font-size:13px;line-height:1.35;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.seat-banner[hidden]{display:none}
.seat-banner>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.seat-banner>span::before{content:'';display:inline-block;width:9px;height:9px;margin-right:7px;box-sizing:border-box;border:2px solid #a5533e;border-radius:50%;vertical-align:-.5px}
.seat-banner .seat-all{flex:none;min-height:32px;padding:4px 12px;border-radius:8px;background:#a5533e;color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
.seat-banner .seat-all:hover{background:#8f4532}
.seat-banner-close{flex:none;width:30px;height:30px;padding:0;border-radius:8px;color:#646b61;font-size:18px;line-height:1}
.seat-banner-close:hover{background:#ece9e0;color:var(--ink)}
.seat-banner button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:600px){.seat-banner{bottom:8px;gap:4px;max-width:calc(100% - 14px);padding:3px 2px 3px 8px;font-size:12px}.seat-banner>span::before{margin-right:4px}.seat-banner .seat-all{min-height:32px;padding:4px 8px;font-size:12px}.seat-banner-close{width:26px}}
/* A14: on touch screens a swipe that starts on paper scrolls the page; stems, cut/erase and a zoomed canvas keep every touch. */
.stage{touch-action:pan-y}
.stage:is([data-tool=split],[data-tool=brush]),.canvas-viewport.is-zoomed .stage{touch-action:none}
/* A touch picks a stem up to 12 px from its visible plant (pickStem); that margin belongs to the stem too, so a drag that starts
 there is never taken over by page scrolling. */
@media(pointer:coarse){.stage .stem::before{content:'';position:absolute;inset:-12px}}
/* HANAMA's own botanical identity, shared across interface languages. */
.brand-mark{display:block;width:38px;height:42px;object-fit:contain;flex:none}

/* Community navigation and reviewed submission */
.community-nav{display:flex;align-items:center;text-decoration:none}
.share-community{margin-top:24px;padding:18px 0 0;border-top:1px solid var(--line)}
.share-community h3{margin-bottom:8px}.share-community .button{margin-top:12px}.share-community [role=status]:not(:empty){margin-top:10px}
@media(max-width:680px) and (orientation:portrait){.masthead .main-nav{gap:clamp(6px,2vw,14px);justify-content:space-around}.masthead .main-nav .nav-button{font-size:12px;min-height:40px}.main-nav #gallery-count{font-size:10px}}
@media(orientation:landscape) and (max-width:900px){.masthead .main-nav{flex:1 1 auto;min-width:0;overflow-x:auto;justify-content:flex-start}.masthead .main-nav .nav-button{flex:0 0 auto}}