:root{color-scheme:dark;--bg:#0b1110;--panel:#141c1a;--panel2:#17201e;--border:#29332f;--muted:#93a19a;--text:#eff7f0;--green:#a8f5bc;--accent:#7ceca4;--field:#0e1614;--shadow:rgba(0,0,0,.24);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,input:focus-visible,select:focus-visible,.preview-stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}strong{font-weight:660}input,select{color:var(--text)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.shell{min-height:100vh}.topbar{height:78px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;background:#101816;border-bottom:1px solid #29332f;gap:12px}.brand{display:flex;align-items:center;gap:13px}.brand-icon{width:38px;height:38px;display:flex;flex-direction:column;justify-content:center;gap:5px;transform:skew(-8deg)}.brand-icon i{display:block;width:33px;height:5px;background:var(--green);border-radius:2px}.brand-icon i:nth-child(2){width:24px}.brand-icon i:nth-child(3){width:29px}.brand-name{font-size:17px;font-weight:800;letter-spacing:1px;white-space:nowrap}.brand-name span{color:var(--green)}.brand-subtitle{font-size:9px;font-weight:700;letter-spacing:1.8px;color:#6f8377;margin-top:4px}.top-actions{display:flex;align-items:center;gap:12px}.privacy{display:flex;align-items:center;gap:7px;font-size:11px;color:#97a99d;margin-right:12px}.status-dot{height:7px;width:7px;background:#72df9a;border-radius:50%;box-shadow:0 0 11px #71e89c88}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:11px 14px;font-size:12px;font-weight:760;white-space:nowrap;transition:background .15s,border .15s,transform .15s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn-primary{background:var(--accent);border:1px solid #8effb0;color:#102317}.btn-primary:hover:not(:disabled){background:#a5fac0}.btn-subtle{background:#242f2b;border:1px solid #303c36;color:#dcece0}.btn-outline{background:#18231e;border:1px solid #3b4b40;color:#d7eadc}.btn-outline:hover{background:#25362d}.btn-icon{font-size:19px;line-height:12px}.workspace{display:grid;grid-template-columns:290px minmax(400px,1fr) 318px;min-height:calc(100vh - 78px);max-width:2200px;margin:auto}.sidebar{min-width:0;background:var(--panel);padding:27px 20px 24px}.left-side{border-right:1px solid var(--border)}.right-side{border-left:1px solid var(--border)}.panel-heading{margin:0 0 28px}.eyebrow{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:2px}.panel-heading h2{font-size:19px;font-weight:760;margin:7px 0}.panel-heading p{font-size:11px;color:var(--muted);margin:0;line-height:1.7}.panel-section{border-top:1px solid #2b3530;padding:21px 0 23px}.section-title{display:flex;align-items:center;gap:8px;margin-bottom:14px}.section-title h3{font-size:13px;letter-spacing:.15px;margin:0;font-weight:750}.number{color:var(--accent);font-size:10px;font-weight:800;border:1px solid #426b50;padding:3px 5px;border-radius:5px}.aspect-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.aspect-btn{height:58px;border:1px solid #303e34;background:#101916;color:#acb7b0;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:10px;font-weight:650}.aspect-btn.active{border-color:#7ceca4;background:#1c3727;color:#cdf6d4}.aspect-btn:hover{border-color:#6a9878}.aspect-shape{display:block;border:1.4px solid currentColor;border-radius:2px;opacity:.9}.shape-landscape{width:22px;height:12px}.shape-portrait{width:12px;height:22px}.shape-square{width:17px;height:17px}.shape-43{width:22px;height:16px}.shape-34{width:16px;height:22px}.shape-32{width:22px;height:15px}.shape-23{width:15px;height:22px}.shape-ultrawide{width:25px;height:10px}.dimension-row{display:flex;gap:8px;align-items:end;margin-top:14px}.dimension-row label{font-size:10px;color:var(--muted);flex:1;min-width:0}.dimension-row input{width:100%;display:block;margin-top:5px;padding:8px 7px;background:#0e1613;border:1px solid #37443a;border-radius:7px;font-size:13px;font-variant-numeric:tabular-nums}.dim-cross{font-size:16px;color:var(--muted);padding-bottom:7px}.dim-unit{font-size:11px;color:var(--muted);padding-bottom:10px}.helper{font-size:10.5px;line-height:1.75;color:#879a8d;margin:10px 0 0}.helper strong{color:#cbdcd0}.upload-box{border:1px dashed #466051;border-radius:11px;min-height:77px;padding:10px;display:flex;align-items:center;gap:10px;background:#0d1812;cursor:pointer;transition:border .15s,background .15s}.upload-box.dragover,.upload-box:hover{background:#18271d;border-color:#8debab}.upload-icon{height:43px;width:43px;flex:0 0 43px;border-radius:9px;background:#26372d;display:grid;place-items:center;font-size:27px;color:#c5dfcd}.green-icon{color:#8cf2ac}.upload-copy{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}.upload-copy strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-copy small{font-size:10px;color:#8b9d90;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-add{color:#a6d7b0;font-size:21px}.crop-button-row{display:flex;gap:7px;margin-top:10px}.crop-button-row .btn{flex:1;min-width:0;padding:10px 6px;font-size:11px}.crop-meta{font-size:10px;color:#8eb19b;margin-top:10px;font-variant-numeric:tabular-nums}.minor-tip{border:1px solid #3b4938;border-radius:12px;padding:13px;display:flex;gap:10px;background:#1d2a1e}.minor-tip>span{font-size:19px;color:#b1da9d}.minor-tip p{margin:0;font-size:10.5px;line-height:1.75;color:#b6c7b6}.center-stage{min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 53% 39%,#192620 0%,#0a1210 57%,#0b100e 100%)}.stage-head{padding:33px 35px 18px;display:flex;justify-content:space-between;align-items:end;gap:10px}.stage-head h1{font-size:24px;font-weight:760;letter-spacing:.4px;margin:7px 0 0}.stage-meta{font-size:11px;color:#9bb29d;white-space:nowrap}.dot-divider{padding:0 6px}.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:3px;box-shadow:0 0 10px #82f0a8}.canvas-area{flex:1;min-height:300px;display:flex;justify-content:center;align-items:center;padding:13px 27px 24px}.canvas-frame{display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:180px}.preview-stage{position:relative;flex:0 1 auto;width:min(100%,calc(66vh * var(--aspect,1.77778)));aspect-ratio:var(--ratio,16 / 9);overflow:hidden;background:#121b16;border:1px solid #3e5344;box-shadow:0 20px 70px #0008,0 0 0 9px #ffffff04;cursor:grab;touch-action:none;user-select:none}.preview-stage:active{cursor:grabbing}#previewCanvas{width:100%;height:100%;display:block}.canvas-onboarding{pointer-events:none;position:absolute;inset:0;background:linear-gradient(125deg,#131f1bd4,#0c120c9c);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px;text-align:center;color:#e4f4e5}.canvas-onboarding .onboarding-glyph{font-size:42px;color:#8cdf9d}.canvas-onboarding strong{font-size:16px}.canvas-onboarding span{font-size:10px;line-height:1.6;padding:0 12px;color:#98b59d}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 28px 22px}.layer-toggle{display:flex;background:#16221b;border:1px solid #304138;border-radius:10px;padding:4px;gap:2px}.layer-btn{font-size:11px;color:#9fb5a3;border:0;border-radius:7px;background:transparent;padding:8px 11px;white-space:nowrap}.layer-btn.selected{color:#e1f9e6;background:#31503a}.green-text{color:#9cf4ac}.gesture-hint{color:#849b8e;font-size:10px}.under-preview{border-top:1px solid #26352a;padding:17px 28px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#0e1713a8}.view-note{display:flex;align-items:flex-start;gap:10px}.view-note-icon{font-size:18px;color:#90e89c}.view-note strong{font-size:11px}.view-note p{margin:6px 0 0;color:#88a08d;font-size:10px;line-height:1.6}.render-status{font-size:10px;color:#7a9f81;letter-spacing:1px;white-space:nowrap}.setting-tabs{display:flex;gap:5px;padding:4px;border:1px solid #36483a;background:#0d1511;border-radius:9px;margin-bottom:20px}.setting-tab{flex:1;min-width:0;color:#9eafa3;font-size:11px;padding:9px 4px;border-radius:6px;background:transparent;border:0}.setting-tab.active{color:#d8f8dd;font-weight:700;background:#28503a}.tab-content[hidden],.modal-backdrop[hidden]{display:none!important}.control-heading{display:flex;justify-content:space-between;align-items:center;gap:5px;margin:0 0 15px}.control-heading-spaced{border-top:1px solid #314034;margin-top:23px;padding-top:21px}.control-category{font-size:11px;font-weight:770;color:#d9f1dd}.text-button{background:none;border:0;color:#91d9a2;font-size:10.5px;text-decoration:underline;text-underline-offset:3px;padding:5px 1px;white-space:nowrap}.text-button:hover{color:#c2ffcd}.range-control{margin:0 0 17px}.range-control>label{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#b8cdbd;font-size:11px;margin-bottom:10px}.range-control output{font-size:12px;font-weight:750;color:#b8fbc8;font-variant-numeric:tabular-nums}.range-control input[type=range]{width:100%;display:block;accent-color:#8aefaa;height:6px;cursor:pointer}.range-caption{font-size:10px;color:#788e80;margin-top:8px;line-height:1.6}.color-control{border-top:1px solid #304036;padding-top:16px;display:flex;justify-content:space-between;align-items:center;gap:10px}.color-control>label{font-size:11px;color:#c2d6c5}.color-select{display:flex;align-items:center;gap:7px}.color-select input{height:27px;width:29px;border:0;background:transparent;padding:0;cursor:pointer}.color-select span{font-size:10px;color:#cde9d2}.tiny-button{font-size:9px;padding:7px;background:#243629;color:#adeabd;border:1px solid #446449;border-radius:6px}.field-label{display:block;font-size:10.5px;color:#a9c0ac;margin-bottom:8px}.field-select{width:100%;background:#0e1712;border:1px solid #415347;border-radius:8px;padding:10px 11px;font-size:11px;margin-bottom:10px}.preset-actions{display:flex;gap:6px}.btn-compact{padding:9px 10px;font-size:10.5px;flex:1}.btn-danger{color:#e4aa9d}.backup-actions{display:flex;justify-content:space-between;gap:5px;margin-top:12px}.import-label{cursor:pointer}.footer-note{color:#63806e;letter-spacing:1.1px;font-size:9px;margin-top:8px}.footer-note span{padding:0 5px}.modal-backdrop{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#030905e8;padding:15px;backdrop-filter:blur(8px)}.modal{width:min(720px,100%);max-height:95dvh;overflow-y:auto;background:#15201a;border:1px solid #425746;border-radius:15px;padding:19px 22px 20px;box-shadow:0 30px 120px #000b}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.modal-header h2{margin:5px 0 0;font-size:19px}.modal-x{border:1px solid #405043;background:#25382a;color:#edf9ee;font-size:22px;width:32px;height:32px;border-radius:7px;line-height:1}.modal-description{font-size:11px;line-height:1.6;color:#bacdbe;margin:13px 0}.crop-preview-holder{height:min(56vh,630px);display:flex;justify-content:center;align-items:center;background:#0b120f;border-radius:11px;padding:10px;overflow:hidden}.crop-image-box{position:relative;display:inline-block;max-width:100%;max-height:100%;line-height:0}.crop-image-box img{display:block;max-width:100%;max-height:calc(min(56vh,630px) - 20px);height:auto;width:auto;object-fit:contain;user-select:none;pointer-events:none}.crop-selection{position:absolute;border:1.5px solid #9dffbb;box-shadow:0 0 0 200vmax #0008,inset 0 0 16px #60f09e1f;cursor:move;touch-action:none}.crop-selection:before,.crop-selection:after{content:"";position:absolute;background:#a9ffc05e;pointer-events:none}.crop-selection:before{top:50%;left:0;right:0;height:1px}.crop-selection:after{left:50%;top:0;bottom:0;width:1px}.crop-handle{position:absolute;width:17px;height:17px;background:#ccffdc;border:2px solid #246a3f;border-radius:50%;z-index:1;touch-action:none}.crop-handle.nw{left:-9px;top:-9px;cursor:nwse-resize}.crop-handle.ne{right:-9px;top:-9px;cursor:nesw-resize}.crop-handle.sw{bottom:-9px;left:-9px;cursor:nesw-resize}.crop-handle.se{bottom:-9px;right:-9px;cursor:nwse-resize}.crop-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:13px}.crop-fields label{font-size:10px;color:#98b59f}.crop-fields input{display:block;margin-top:5px;width:100%;min-width:0;padding:8px;border:1px solid #3f5948;background:#111b15;border-radius:7px;font-size:12px}.modal-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}.footer-right{display:flex;gap:9px}.small-modal{width:min(470px,100%)}.name-input{width:100%;padding:13px;background:#0e1913;border:1px solid #4b6650;border-radius:8px;margin:6px 0 10px}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);background:#25452f;border:1px solid #71d48e;color:#e2f8e7;padding:13px 20px;border-radius:10px;font-size:12px;z-index:100;box-shadow:0 14px 55px #0009;opacity:0;pointer-events:none;transition:all .25s;max-width:90vw;text-align:center}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:1450px){.workspace{grid-template-columns:265px minmax(340px,1fr) 290px}.sidebar{padding:22px 15px}.topbar{padding:0 18px}.privacy{display:none}.stage-head{padding:23px 22px}.canvas-area{padding:8px 14px 15px}.gesture-hint{display:none}}
@media(max-width:1050px){.workspace{grid-template-columns:245px minmax(350px,1fr)}.right-side{grid-column:1/-1;border-top:1px solid var(--border);border-left:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.right-side .panel-heading{grid-column:1/-1;margin-bottom:12px}.right-side .footer-note{grid-column:1/-1}.center-stage{min-height:520px}.preview-stage{width:min(100%,calc(53vh * var(--aspect,1.77778)))}.canvas-area{min-height:240px}}
@media(max-width:700px){.topbar{height:auto;min-height:70px;padding:12px;align-items:flex-start}.brand{gap:7px}.brand-icon{width:27px;transform:scale(.75);transform-origin:left center;margin-right:-7px}.brand-name{font-size:12px;letter-spacing:.4px}.brand-subtitle{font-size:7px;letter-spacing:1px}.top-actions{gap:5px}.top-actions .btn{padding:9px 8px;font-size:10px}.top-actions #resetAll{font-size:0}.top-actions #resetAll .btn-icon{font-size:20px}.workspace{display:flex;flex-direction:column}.center-stage{order:0;min-height:0}.left-side{order:1;border-right:0;border-top:1px solid var(--border)}.right-side{order:2;display:block;border-top:1px solid var(--border)}.stage-head{padding:18px 14px 12px}.stage-head h1{font-size:18px}.stage-meta{font-size:9px}.canvas-area{min-height:185px;padding:9px 12px 15px}.canvas-frame{min-height:160px}.preview-stage{width:min(100%,calc(52dvh * var(--aspect,1.77778)))}.canvas-toolbar{padding:0 11px 14px}.layer-toggle{width:100%}.layer-btn{flex:1;font-size:11px}.under-preview{padding:11px 13px}.view-note p{font-size:9px}.sidebar{padding:20px 18px}.panel-heading{margin-bottom:15px}.aspect-grid{grid-template-columns:repeat(8,1fr)}.aspect-btn{height:55px;font-size:9px}.modal{padding:14px}.crop-preview-holder{height:min(57dvh,580px)}.crop-image-box img{max-height:calc(min(57dvh,580px) - 20px)}.crop-fields{gap:4px}.modal-footer .btn{padding:10px 8px;font-size:10px}}
@media(max-width:410px){.aspect-grid{grid-template-columns:repeat(4,1fr)}.stage-meta{display:none}.brand-name{font-size:11px}.canvas-onboarding strong{font-size:12px}.onboarding-glyph{font-size:30px}}
[hidden]{display:none!important}
/* v2: touch-friendly direct sharing, with an independent iOS save action */
.btn-share{border:1px solid #76dda0;background:#305f43;color:#e8fff1;white-space:nowrap}
.btn-share:hover{background:#3f7655}
@media(max-width:700px){.top-actions{flex-wrap:wrap;justify-content:flex-end}.top-actions .btn-share{font-size:10px;padding:9px 8px}.range-control{margin-bottom:20px}}
#iosShareHint{color:#a8f4ba;font-weight:600}

/* v2.1.2: Stable Safari/Chrome on iPad landscape scrolling.
   iOS browser toolbars change the visual viewport height during scrolling.
   svh keeps the canvas from resizing while the page scrolls. */
@supports (height: 100svh) {
  .shell { min-height: 100svh; }
  .workspace { min-height: calc(100svh - 78px); }
  .preview-stage { width: min(100%, calc(66svh * var(--aspect,1.77778))); }
  @media (max-width: 1050px) {
    .preview-stage { width: min(100%, calc(53svh * var(--aspect,1.77778))); }
  }
  @media (max-width: 700px) {
    .preview-stage { width: min(100%, calc(52svh * var(--aspect,1.77778))); }
  }
}
/* Keep navigation within reach when using iPad in landscape orientation. */
@media (min-width: 701px) and (orientation: landscape) and (any-pointer: coarse) {
  .topbar { position: sticky; top: 0; z-index: 15; }
}
/* Floating button is separate from the draggable touch-action:none preview.
   It works even if a swipe started within the canvas cannot scroll the page. */
.scroll-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, calc(12px + env(safe-area-inset-bottom)));
  z-index: 24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 45px;
  padding: 10px 15px;
  border: 1px solid #9af5b6;
  border-radius: 999px;
  background: #244b32;
  color: #ecfff0;
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 5px 22px #0009;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.scroll-to-top:hover { background: #326544; }
.scroll-to-top[hidden] { display: none !important; }
@media (max-width: 700px) {
  .scroll-to-top { right: 14px; bottom: max(16px, env(safe-area-inset-bottom)); }
}