.abo-app{
    --abo-bg: #f5f8f6;
    --abo-paper: #fff;
    --abo-ink: #17333b;
    --abo-muted: #64757a;
    --abo-blue: #176487;
    --abo-blue-dark: #0d4967;
    --abo-blue-soft: #e5f3f7;
    --abo-green: #13705c;
    --abo-green-soft: #e4f5ee;
    --abo-yellow: #f4cc65;
    --abo-red: #b7443e;
    --abo-line: #cbd9dc;
    background: var(--abo-bg);
    color: var(--abo-ink);
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    line-height: 1.75;
    min-width: 0;
}
.abo-app *,.abo-app *::before,.abo-app *::after{ box-sizing: border-box; }
.abo-app button,.abo-app input,.abo-app select{ font: inherit; }
.abo-app button{ touch-action: manipulation; }
.abo-app [hidden]{ display: none !important; }
.abo-app a:focus-visible,.abo-app button:focus-visible,.abo-app input:focus-visible,.abo-app select:focus-visible,.abo-app summary:focus-visible{ outline: 3px solid var(--abo-yellow); outline-offset: 3px; }
.abo-hero{ align-items: center; display: grid; gap: 62px; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); margin: 0 auto; max-width: 1180px; min-height: 610px; padding: 82px 28px 96px; }
.abo-hero-copy{ min-width: 0; }
.abo-eyebrow{ color: var(--abo-green); font-size: 11px; font-weight: 900; letter-spacing: .18em; margin: 0 0 10px; }
.abo-hero h1,.abo-section-heading h2,.abo-safety h2,.abo-faq h2{ color: var(--abo-blue-dark); font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-weight: 800; letter-spacing: .01em; }
.abo-hero h1{ font-size: clamp(38px,4.2vw,56px); line-height: 1.28; margin: 0 0 22px; overflow-wrap: anywhere; }
.abo-hero h1 span{ color: var(--abo-blue); }
.abo-lead{ font-size: 17px; margin: 0; max-width: 700px; }
.abo-points{ display: flex; flex-wrap: wrap; gap: 9px; margin-top: 27px; }
.abo-points span{ background: var(--abo-blue-soft); border-radius: 999px; color: var(--abo-blue-dark); font-size: 12px; font-weight: 900; padding: 7px 12px; }
.abo-hero-cta{ background: var(--abo-blue); border-radius: 10px; color: #fff; display: inline-block; font-size: 14px; font-weight: 900; margin-top: 25px; padding: 13px 22px; text-decoration: none; }
.abo-hero-cta:hover{ background: var(--abo-blue-dark); color: #fff; transform: translateY(-1px); }
.abo-hero-visual{ display: grid; min-height: 340px; place-items: center; }
.abo-photo-stack{ height: 300px; position: relative; width: 320px; }
.abo-photo-card{ background: linear-gradient(145deg,#f5d36f,#deaf3b); border: 2px solid #c99b2d; border-radius: 18px; box-shadow: 0 18px 35px rgba(13,73,103,.15); height: 225px; left: 45px; overflow: hidden; position: absolute; top: 38px; width: 240px; }
.abo-photo-card::before{ background: rgba(255,255,255,.36); border-radius: 50%; content: ""; height: 165px; left: -45px; position: absolute; top: -28px; width: 165px; }
.abo-photo-back{ background: linear-gradient(145deg,#8bbac5,#4d8da4); left: 8px; top: 8px; transform: rotate(-9deg); }
.abo-photo-back span{ align-items: center; background: #fff; border-radius: 50%; bottom: 18px; color: var(--abo-blue); display: flex; font-size: 24px; font-weight: 900; height: 58px; justify-content: center; position: absolute; right: 18px; width: 58px; }
.abo-photo-mid{ background: linear-gradient(145deg,#d3e9d5,#86b991); left: 70px; top: 28px; transform: rotate(8deg); }
.abo-photo-mid b{ align-items: center; background: #fff; border: 9px solid #fff; bottom: 20px; color: var(--abo-ink); display: flex; font-family: monospace; font-size: 22px; height: 76px; justify-content: center; position: absolute; right: 18px; width: 76px; }
.abo-photo-front{ color: #71551a; left: 40px; top: 58px; transform: rotate(-2deg); }
.abo-photo-front i{ align-items: center; border: 3px double #a23f37; border-radius: 50%; color: #a23f37; display: flex; font-family: serif; font-style: normal; font-weight: 900; height: 54px; justify-content: center; left: 19px; position: absolute; top: 18px; transform: rotate(-6deg); width: 54px; }
.abo-photo-front strong{ bottom: 25px; font-size: 28px; left: 23px; letter-spacing: .08em; position: absolute; }
.abo-photo-front em{ background: #fff; border-radius: 999px; bottom: 22px; font-size: 22px; font-style: normal; font-weight: 900; padding: 4px 12px; position: absolute; right: 18px; }
.abo-tool{ background: #fdfcf8; border-bottom: 1px solid var(--abo-line); border-top: 1px solid var(--abo-line); padding: 78px max(28px,calc((100vw - 1180px)/2)) 92px; scroll-margin-top: 12px; }
.abo-section-heading{ margin: 0 auto 29px; max-width: 1180px; }
.abo-section-heading h2,.abo-safety h2,.abo-faq h2{ font-size: clamp(30px,4vw,44px); line-height: 1.38; margin: 0 0 10px; }
.abo-section-heading > p:last-child{ color: var(--abo-muted); margin: 0; }
.abo-workspace{ align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); margin: 0 auto; max-width: 1240px; }
.abo-controls{ display: grid; gap: 18px; min-width: 0; }
.abo-card,.abo-preview-card{ background: var(--abo-paper); border: 1px solid var(--abo-line); border-radius: 18px; box-shadow: 0 16px 36px rgba(23,51,59,.07); max-width: 100%; min-width: 0; padding: 25px; }
.abo-card-title{ align-items: flex-start; display: flex; gap: 13px; margin-bottom: 17px; }
.abo-card-title > span{ align-items: center; background: var(--abo-blue); border-radius: 50%; color: #fff; display: flex; flex: 0 0 34px; font-size: 14px; font-weight: 900; height: 34px; justify-content: center; }
.abo-card-title h3{ color: var(--abo-blue-dark); font-family: "Yu Mincho", serif; font-size: 22px; line-height: 1.35; margin: 0; }
.abo-card-title h3 small{ color: var(--abo-muted); font-family: sans-serif; font-size: 11px; }
.abo-card-title p{ color: var(--abo-muted); font-size: 12px; margin: 3px 0 0; }
.abo-dropzone{ position: relative; }
.abo-dropzone input{ height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.abo-dropzone label{ align-items: center; background: #f4fafb; border: 2px dashed #8eb5c2; border-radius: 14px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; min-height: 170px; padding: 25px; text-align: center; transition: .18s; }
.abo-dropzone label:hover,.abo-dropzone.is-dragging label{ background: var(--abo-blue-soft); border-color: var(--abo-blue); transform: translateY(-1px); }
.abo-dropzone label > span{ align-items: center; background: var(--abo-blue); border-radius: 50%; color: #fff; display: flex; font-size: 26px; height: 48px; justify-content: center; line-height: 1; margin-bottom: 10px; width: 48px; }
.abo-dropzone label b{ color: var(--abo-blue-dark); font-size: 18px; }
.abo-dropzone label small{ color: var(--abo-muted); font-size: 11px; margin-top: 4px; }
.abo-privacy{ align-items: flex-start; background: var(--abo-green-soft); border: 1px solid #9ed0bd; border-radius: 12px; display: flex; gap: 12px; margin-top: 14px; padding: 15px 17px; }
.abo-privacy > span{ align-items: center; background: var(--abo-green); border-radius: 50%; color: #fff; display: flex; flex: 0 0 25px; font-size: 13px; font-weight: 900; height: 25px; justify-content: center; }
.abo-privacy b{ color: #0a5948; display: block; font-size: 14px; }
.abo-privacy p{ color: #315f55; font-size: 12px; margin: 3px 0 0; }
.abo-file-summary{ background: #f7f9f9; border: 1px solid var(--abo-line); border-radius: 12px; margin-top: 15px; padding: 15px; }
.abo-file-summary > div:first-child{ align-items: center; display: flex; justify-content: space-between; }
.abo-file-summary button{ background: transparent; border: 0; color: var(--abo-red); cursor: pointer; font-size: 11px; font-weight: 800; }
.abo-file-summary > label{ display: grid; font-size: 11px; font-weight: 800; gap: 5px; margin-top: 12px; }
.abo-file-summary select{ background: #fff; border: 1px solid #adc0c5; border-radius: 8px; min-height: 42px; padding: 7px 10px; width: 100%; }
.abo-file-summary > p{ color: var(--abo-muted); font-size: 10px; margin: 5px 0 0; }
.abo-thumbs{ display: grid; gap: 8px; grid-template-columns: repeat(6,minmax(0,1fr)); margin-top: 12px; max-height: 210px; overflow: auto; padding: 2px; }
.abo-thumb{ aspect-ratio: 1; background: #e9eeee; border: 2px solid transparent; border-radius: 7px; cursor: pointer; overflow: hidden; padding: 0; position: relative; }
.abo-thumb.is-active{ border-color: var(--abo-blue); box-shadow: 0 0 0 2px rgba(23,100,135,.2); }
.abo-thumb img{ height: 100%; object-fit: cover; width: 100%; }
.abo-thumb span{ background: rgba(13,73,103,.88); border-radius: 0 0 0 5px; color: #fff; font-size: 8px; font-weight: 900; padding: 1px 4px; position: absolute; right: 0; top: 0; }
.abo-layer{ border: 1px solid var(--abo-line); border-radius: 13px; margin-top: 10px; overflow: hidden; }
.abo-layer-switch{ align-items: center; background: #f7f9f9; cursor: pointer; display: flex; gap: 11px; min-height: 66px; padding: 12px 14px; }
.abo-layer-switch input{ accent-color: var(--abo-blue); height: 22px; width: 22px; }
.abo-layer-switch > span{ align-items: center; background: var(--abo-blue-soft); border-radius: 8px; color: var(--abo-blue-dark); display: flex; flex: 0 0 46px; font-size: 10px; font-weight: 900; height: 39px; justify-content: center; }
.abo-layer-switch b{ color: var(--abo-blue-dark); font-size: 14px; }
.abo-layer:has(.abo-layer-switch input:checked){ border-color: #78aaba; box-shadow: 0 0 0 2px rgba(23,100,135,.08); }
.abo-layer:has(.abo-layer-switch input:checked) .abo-layer-switch{ background: var(--abo-blue-soft); }
.abo-layer-body{ border-top: 1px solid var(--abo-line); padding: 15px; }
.abo-layer-body > label:not(.abo-file-button),.abo-grid-2 > label,.abo-grid-3 > label,.abo-detail-grid > label{ color: #334e55; display: grid; font-size: 11px; font-weight: 900; gap: 5px; }
.abo-layer-body input[type="text"],.abo-layer-body input[type="url"],.abo-layer-body input[type="number"],.abo-layer-body select,.abo-card select{ background: #fff; border: 1px solid #aebfc4; border-radius: 8px; min-height: 43px; padding: 7px 10px; width: 100%; }
.abo-layer-body input[type="color"]{ background: #fff; border: 1px solid #aebfc4; border-radius: 8px; height: 43px; padding: 4px; width: 100%; }
.abo-layer-body input[type="range"],.abo-detail-grid input[type="range"]{ accent-color: var(--abo-blue); min-height: 28px; width: 100%; }
.abo-layer-body output,.abo-detail-grid output{ color: var(--abo-blue); float: right; font-size: 10px; }
.abo-file-button{ background: var(--abo-blue); border-radius: 8px; color: #fff; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 900; justify-content: center; min-height: 43px; padding: 9px 14px; width: 100%; }
.abo-file-button input{ height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.abo-picked-name,.abo-help{ color: var(--abo-muted); font-size: 10px; margin: 6px 0 12px; }
.abo-grid-2,.abo-grid-3,.abo-detail-grid{ display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 12px; }
.abo-grid-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
.abo-small-button{ background: var(--abo-blue-soft); border: 1px solid #8fbac6; border-radius: 8px; color: var(--abo-blue-dark); cursor: pointer; font-size: 11px; font-weight: 900; margin-top: 8px; min-height: 41px; padding: 7px 12px; width: 100%; }
.abo-radio-row{ border: 0; margin: 0 0 8px; padding: 0; }
.abo-radio-row legend{ color: #334e55; font-size: 11px; font-weight: 900; margin-bottom: 6px; }
.abo-radio-row label{ align-items: center; background: #f7f9f9; border: 1px solid var(--abo-line); border-radius: 8px; display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; margin-right: 5px; padding: 8px 11px; }
.abo-radio-row input,.abo-checkline input{ accent-color: var(--abo-blue); }
.abo-checkline{ align-items: center; align-self: end; display: flex !important; grid-template-columns: auto 1fr !important; min-height: 43px; }
.abo-checkline input{ height: 19px; width: 19px; }
.abo-layer details,.abo-card > details{ border-top: 1px dashed var(--abo-line); margin-top: 14px; padding-top: 10px; }
.abo-layer summary,.abo-card > details summary{ color: var(--abo-blue); cursor: pointer; font-size: 11px; font-weight: 900; }
.abo-presets{ display: grid; gap: 7px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.abo-presets button{ background: #f7f9f9; border: 1px solid var(--abo-line); border-radius: 8px; color: var(--abo-ink); cursor: pointer; font-size: 10px; font-weight: 800; min-height: 42px; padding: 6px; }
.abo-presets button.is-active{ background: var(--abo-blue); border-color: var(--abo-blue); color: #fff; }
.abo-process-button{ background: var(--abo-blue); border: 0; border-radius: 10px; color: #fff; cursor: pointer; font-size: 15px; font-weight: 900; margin-top: 17px; min-height: 55px; padding: 12px 18px; width: 100%; }
.abo-process-button:hover{ background: var(--abo-blue-dark); }
.abo-process-button:disabled{ cursor: not-allowed; opacity: .45; }
.abo-cancel-button{ background: #fff; border: 1px solid #d79d98; border-radius: 8px; color: var(--abo-red); cursor: pointer; font-size: 11px; font-weight: 900; margin-top: 8px; min-height: 42px; width: 100%; }
.abo-progress{ margin-top: 14px; }
.abo-progress > div{ background: #e4eaeb; border-radius: 999px; height: 10px; overflow: hidden; }
.abo-progress span{ background: linear-gradient(90deg,var(--abo-blue),var(--abo-green)); display: block; height: 100%; transition: width .2s; width: 0; }
.abo-progress p,.abo-status{ color: var(--abo-muted); font-size: 11px; margin: 7px 0 0; }
.abo-status.is-error{ color: var(--abo-red); font-weight: 900; }
.abo-downloads{ background: var(--abo-green-soft); border: 1px solid #9ed0bd; border-radius: 12px; margin-top: 14px; padding: 14px; }
.abo-downloads h4{ color: #0a5948; font-size: 15px; margin: 0 0 9px; }
.abo-downloads a{ background: var(--abo-green); border-radius: 8px; color: #fff; display: block; font-size: 12px; font-weight: 900; margin-top: 7px; padding: 10px 13px; text-align: center; text-decoration: none; }
.abo-downloads p{ color: #315f55; font-size: 10px; margin: 8px 0 0; }
.abo-preview-card{ position: sticky; top: 18px; }
.abo-preview-card h3{ color: var(--abo-blue-dark); font-family: "Yu Mincho", serif; font-size: 25px; margin: 0; }
.abo-preview-card > div:first-child > p:last-child{ color: var(--abo-muted); font-size: 11px; margin: 4px 0 15px; }
.abo-preview-wrap{ align-items: center; background-color: #e9eeee; background-image: linear-gradient(45deg,#d9dfdf 25%,transparent 25%),linear-gradient(-45deg,#d9dfdf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dfdf 75%),linear-gradient(-45deg,transparent 75%,#d9dfdf 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; border: 1px solid var(--abo-line); border-radius: 12px; display: flex; justify-content: center; min-height: 455px; overflow: hidden; position: relative; }
.abo-preview-wrap canvas{ display: block; height: auto; max-height: 650px; max-width: 100%; touch-action: none; width: auto; }
.abo-preview-wrap canvas.is-draggable{ cursor: grab; }
.abo-preview-wrap canvas.is-draggable:active{ cursor: grabbing; }
.abo-preview-wrap > span{ background: rgba(255,255,255,.88); border-radius: 999px; color: var(--abo-muted); font-size: 11px; left: 50%; padding: 7px 11px; position: absolute; top: 50%; transform: translate(-50%,-50%); white-space: nowrap; }
.abo-preview-note{ color: var(--abo-muted); font-size: 10px; margin: 10px 0 0; }
.abo-qr-maker{ left: -9999px; position: fixed; top: -9999px; }
.abo-layer-tabs{ display: grid; gap: 8px; grid-template-columns: auto minmax(150px,1fr) auto auto; margin: 0 0 12px; max-width: 100%; min-width: 0; width: 100%; }
.abo-layer-nav-button,.abo-layer-add{ background: #f5f8f8; border: 1px solid var(--abo-line); border-radius: 9px; color: var(--abo-blue-dark); cursor: pointer; font-size: 10px; font-weight: 900; min-height: 43px; padding: 8px 11px; white-space: nowrap; }
.abo-layer-nav-select{ background: #fff; border: 2px solid #7faebe; border-radius: 9px; color: var(--abo-blue-dark); font-size: 11px; font-weight: 900; min-height: 43px; min-width: 0; padding: 7px 30px 7px 10px; width: 100%; }
.abo-layer-add{ background: var(--abo-green-soft); border-color: #9ed0bd; color: var(--abo-green); }
.abo-layer-nav-button:disabled,.abo-layer-add:disabled{ cursor: not-allowed; opacity: .4; }
.abo-layer-editor{ border: 1px solid #9db7be; border-radius: 14px; overflow: hidden; }
.abo-layer-editor-head{ align-items: center; background: var(--abo-blue-soft); display: flex; gap: 14px; justify-content: space-between; padding: 13px 15px; }
.abo-layer-editor-head b{ color: var(--abo-blue-dark); font-size: 14px; }
.abo-layer-editor-head p{ color: var(--abo-muted); font-size: 9px; margin: 0; }
.abo-layer-enabled{ align-items: center; display: flex; font-size: 10px; font-weight: 900; gap: 6px; }
.abo-layer-enabled input{ accent-color: var(--abo-blue); height: 19px; width: 19px; }
.abo-type-choices{ background: #f7f9f9; border-bottom: 1px solid var(--abo-line); display: grid; gap: 6px; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 11px 13px; }
.abo-type-choices button{ background: #fff; border: 1px solid var(--abo-line); border-radius: 8px; color: var(--abo-ink); cursor: pointer; font-size: 10px; font-weight: 900; min-height: 40px; padding: 6px; }
.abo-type-choices button.is-active{ background: var(--abo-blue); border-color: var(--abo-blue); color: #fff; }
.abo-layer-settings{ padding: 16px; }
.abo-layer-settings > label:not(.abo-file-button):not(.abo-checkline),.abo-layer-settings .abo-grid-2 > label,.abo-layer-settings .abo-grid-3 > label,.abo-layer-settings .abo-detail-grid > label{ color: #334e55; display: grid; font-size: 11px; font-weight: 900; gap: 5px; }
.abo-layer-settings input[type="text"],.abo-layer-settings input[type="url"],.abo-layer-settings input[type="number"],.abo-layer-settings select,.abo-layer-settings textarea{ background: #fff; border: 1px solid #aebfc4; border-radius: 8px; min-height: 43px; padding: 8px 10px; resize: vertical; width: 100%; }
.abo-layer-settings input[type="color"]{ background: #fff; border: 1px solid #aebfc4; border-radius: 8px; height: 43px; padding: 4px; width: 100%; }
.abo-layer-settings input[type="range"]{ accent-color: var(--abo-blue); min-height: 28px; width: 100%; }
.abo-layer-settings output{ color: var(--abo-blue); float: right; font-size: 10px; }
.abo-layer-settings details{ border-top: 1px dashed var(--abo-line); margin-top: 14px; padding-top: 10px; }
.abo-layer-settings summary{ color: var(--abo-blue); cursor: pointer; font-size: 11px; font-weight: 900; }
.abo-placement-mode{ border: 0; display: grid; gap: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 15px 0 0; padding: 0; }
.abo-placement-mode legend{ color: #334e55; font-size: 11px; font-weight: 900; margin-bottom: 6px; }
.abo-placement-mode label{ align-items: flex-start; background: #f7f9f9; border: 1px solid var(--abo-line); border-radius: 9px; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; padding: 10px; }
.abo-placement-mode label.is-active{ background: var(--abo-blue-soft); border-color: #79aebe; }
.abo-placement-mode input{ accent-color: var(--abo-blue); grid-row: 1 / span 2; margin-top: 3px; }
.abo-placement-mode b{ color: var(--abo-blue-dark); font-size: 11px; }
.abo-placement-mode small{ color: var(--abo-muted); font-size: 8px; }
.abo-free-warning{ background: #fff3df; border: 1px solid #e8bf64; border-radius: 10px; color: #725314; margin-top: 12px; padding: 11px 13px; }
.abo-free-warning b{ font-size: 11px; }
.abo-free-warning p{ font-size: 9px; margin: 2px 0 0; }
.abo-layer-actions{ border-top: 1px solid var(--abo-line); display: grid; gap: 15px; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 13px 15px 15px; }
.abo-layer-action-group{ min-width: 0; }
.abo-layer-action-group > b{ color: #496168; display: block; font-size: 9px; letter-spacing: .04em; margin-bottom: 6px; }
.abo-layer-management{ border-left: 1px solid var(--abo-line); padding-left: 15px; }
.abo-layer-action-buttons{ display: flex; flex-wrap: wrap; gap: 6px; }
.abo-layer-actions button{ background: #fff; border: 1px solid var(--abo-line); border-radius: 7px; color: var(--abo-blue); cursor: pointer; flex: 1 1 auto; font-size: 9px; font-weight: 900; min-height: 36px; padding: 6px 9px; }
.abo-layer-actions button.is-danger{ color: var(--abo-red); }
.abo-layer-actions button:disabled{ cursor: not-allowed; opacity: .4; }
.abo-layer-limit{ color: var(--abo-muted); font-size: 9px; margin: 7px 2px 0; }
.abo-checkline-wide{ margin-top: 10px; }
.abo-preview-head{ align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
.abo-enlarge-button{ background: var(--abo-blue-soft); border: 1px solid #8fbac6; border-radius: 8px; color: var(--abo-blue-dark); cursor: pointer; flex: 0 0 auto; font-size: 10px; font-weight: 900; min-height: 40px; padding: 7px 11px; }
.abo-enlarge-button:disabled{ cursor: not-allowed; opacity: .4; }
.abo-preview-slider{ align-items: center; display: grid; gap: 9px; grid-template-columns: 1fr auto 1fr; margin-top: 12px; }
.abo-preview-slider button{ background: #fff; border: 1px solid var(--abo-line); border-radius: 8px; color: var(--abo-blue); cursor: pointer; font-size: 10px; font-weight: 900; min-height: 40px; padding: 7px 10px; }
.abo-preview-slider button:last-child{ justify-self: stretch; }
.abo-preview-slider button:disabled{ cursor: not-allowed; opacity: .35; }
.abo-preview-slider b{ color: var(--abo-muted); font-size: 10px; min-width: 48px; text-align: center; }
body.abo-modal-open{ overflow: hidden; }
.abo-modal{ align-items: center; background: rgba(5,27,36,.86); display: flex; inset: 0; justify-content: center; padding: 24px; position: fixed; z-index: 100000; }
.abo-modal[hidden]{ display: none !important; }
.abo-modal-dialog{ background: #fff; border-radius: 16px; box-shadow: 0 28px 80px rgba(0,0,0,.35); max-height: calc(100vh - 34px); max-width: 1180px; overflow: auto; padding: 20px; width: 100%; }
.abo-modal-head{ align-items: flex-start; display: flex; justify-content: space-between; }
.abo-modal-head h2{ color: var(--abo-blue-dark); font-family: "Yu Mincho", serif; font-size: clamp(24px,3vw,36px); margin: 0 0 12px; }
.abo-modal-head button{ align-items: center; background: #edf3f4; border: 0; border-radius: 50%; color: var(--abo-blue-dark); cursor: pointer; display: flex; font-size: 24px; height: 42px; justify-content: center; width: 42px; }
.abo-modal-image-wrap{ align-items: center; background-color: #e9eeee; background-image: linear-gradient(45deg,#d9dfdf 25%,transparent 25%),linear-gradient(-45deg,#d9dfdf 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dfdf 75%),linear-gradient(-45deg,transparent 75%,#d9dfdf 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; border-radius: 11px; display: flex; justify-content: center; min-height: 420px; overflow: hidden; }
.abo-modal-image-wrap img{ display: block; max-height: calc(100vh - 230px); max-width: 100%; object-fit: contain; }
.abo-modal-dialog > p{ color: var(--abo-muted); font-size: 9px; margin: 8px 0 0; text-align: center; }
.abo-howto,.abo-usecases,.abo-faq{ margin: 0 auto; max-width: 1180px; padding: 84px 28px; }
.abo-usecases{ padding-top: 15px; }
.abo-step-grid,.abo-use-grid{ display: grid; gap: 16px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.abo-step-grid article,.abo-use-grid article{ background: #fff; border: 1px solid var(--abo-line); border-radius: 14px; padding: 21px; }
.abo-step-grid span{ align-items: center; background: var(--abo-blue); border-radius: 50%; color: #fff; display: flex; font-size: 12px; font-weight: 900; height: 31px; justify-content: center; margin-bottom: 13px; width: 31px; }
.abo-step-grid b,.abo-use-grid b{ color: var(--abo-blue-dark); display: block; font-size: 15px; }
.abo-step-grid p,.abo-use-grid p{ color: var(--abo-muted); font-size: 12px; margin: 7px 0 0; }
.abo-safety{ align-items: center; background: var(--abo-blue-dark); color: #fff; display: grid; gap: 50px; grid-template-columns: 1fr auto; margin: 0 auto; max-width: 1124px; padding: 55px 60px; }
.abo-safety .abo-eyebrow{ color: #8ed6c6; }
.abo-safety h2{ color: #fff; }
.abo-safety p:last-child{ color: #d8e8ea; margin: 0; max-width: 700px; }
.abo-safety > span{ align-items: center; border: 3px double #8ed6c6; border-radius: 50%; display: flex; font-family: serif; font-size: 15px; font-weight: 900; height: 120px; justify-content: center; text-align: center; transform: rotate(-5deg); width: 120px; }
.abo-faq-list{ border-top: 1px solid var(--abo-line); }
.abo-faq-list details{ border-bottom: 1px solid var(--abo-line); padding: 18px 4px; }
.abo-faq-list summary{ color: var(--abo-blue-dark); cursor: pointer; font-size: 15px; font-weight: 900; padding-right: 30px; }
.abo-faq-list p{ color: var(--abo-muted); font-size: 13px; margin: 10px 0 0; max-width: 900px; }
@media (max-width: 980px){.abo-hero{ gap: 25px; grid-template-columns: minmax(0,1fr) 270px; }
.abo-photo-stack{ transform: scale(.82); transform-origin: center; }
.abo-workspace{ grid-template-columns: 1fr; }
.abo-preview-card{ position: static; }
.abo-preview-wrap{ min-height: 380px; }
.abo-step-grid,.abo-use-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }}
@media (max-width: 720px){.abo-hero{ grid-template-columns: 1fr; min-height: 0; padding: 55px 20px 62px; }
.abo-hero h1{ font-size: clamp(33px,9vw,46px); }
.abo-hero h1 br{ display: none; }
.abo-hero-visual{ min-height: 285px; overflow: hidden; }
.abo-photo-stack{ transform: scale(.85); }
.abo-tool{ padding: 58px 16px 65px; }
.abo-card,.abo-preview-card{ border-radius: 14px; padding: 18px; }
.abo-grid-2,.abo-grid-3,.abo-detail-grid{ grid-template-columns: 1fr; }
.abo-thumbs{ grid-template-columns: repeat(5,minmax(0,1fr)); }
.abo-presets{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.abo-preview-wrap{ min-height: 330px; }
.abo-type-choices{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.abo-placement-mode{ grid-template-columns: 1fr; }
.abo-layer-editor-head{ align-items: flex-start; flex-direction: column; }
.abo-layer-actions{ grid-template-columns: 1fr; }
.abo-layer-management{ border-left: 0; border-top: 1px dashed var(--abo-line); padding-left: 0; padding-top: 12px; }
.abo-layer-tabs{ grid-template-columns: auto minmax(0,1fr) auto; }
.abo-layer-add{ grid-column: 1 / -1; width: 100%; }
.abo-modal{ padding: 8px; }
.abo-modal-dialog{ max-height: calc(100vh - 16px); padding: 13px; }
.abo-modal-image-wrap{ min-height: 300px; }
.abo-howto,.abo-usecases,.abo-faq{ padding: 62px 18px; }
.abo-usecases{ padding-top: 0; }
.abo-step-grid,.abo-use-grid{ grid-template-columns: 1fr; }
.abo-safety{ gap: 26px; grid-template-columns: 1fr; padding: 42px 24px; }
.abo-safety > span{ height: 95px; width: 95px; }}
@media (max-width: 380px){.abo-thumbs{ grid-template-columns: repeat(4,minmax(0,1fr)); }
.abo-layer-switch{ padding: 10px; }
.abo-layer-switch > span{ flex-basis: 40px; }}