/* A working art table: crisp white paper, indigo ink, lavender and real painted samples. */
.aif-page { --aif-ink:#1f2d56; --aif-heading:#455492; --aif-paper:#f3f3ff; --aif-rule:#e2e4ff; color:var(--aif-ink); font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.6; }
.aif-page *, .aif-page *::before, .aif-page *::after { box-sizing:border-box; }
/* Bootstrap clearfix pseudo-elements otherwise occupy cells in grid/flex containers. */
.aif-page .container::before, .aif-page .container::after { content:none; display:none; }
.aif-page figure img { margin:0; }
.aif-page figcaption { margin:0; font-style:normal; }
.aif-page [hidden] { display:none !important; }
.aif-page h1, .aif-page h2, .aif-page h3 { color:var(--aif-heading); font-family:inherit; text-transform:none; letter-spacing:normal; }
.aif-page h1 { font-size:clamp(36px,4vw,54px); line-height:1.1; font-weight:700; letter-spacing:-1.6px; margin:0 0 24px; }
.aif-page h2 { font-size:clamp(28px,3vw,38px); line-height:1.2; font-weight:600; letter-spacing:-.7px; margin:0 0 18px; }
.aif-page h3 { font-size:20px; line-height:1.35; font-weight:700; margin:0 0 12px; }
.aif-page p { margin:0 0 16px; }
.aif-page a:focus-visible, .aif-page button:focus-visible, .aif-page summary:focus-visible { outline:3px solid #5163ca; outline-offset:4px; }
.aif-page .aif-hero { padding:64px 0 44px; background:#f8f8ff; overflow:hidden; }
.aif-hero-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:center; gap:48px; }
.aif-lead { font-size:18px; line-height:1.65; max-width:55ch; }
.aif-actions { display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin:28px 0 18px; }
.aif-page .btn-mimipanda { background:#2dce89; color:#163d30; text-align:center; font-size:18px; line-height:1.4; text-decoration:none; box-shadow:0 4px 0 #1ba870; }
.aif-page .btn-mimipanda:hover { background:#16aa6a; color:#102e23; }
.aif-page .aif-text-link, .aif-page .aif-related a { color:#455492; text-decoration:underline; text-underline-offset:4px; }
.aif-page .aif-note { color:#53607c; font-size:13px; line-height:1.55; max-width:65ch; margin-bottom:0; }
.aif-studio { min-width:0; }
.aif-comparison { position:relative; aspect-ratio:1.17; isolation:isolate; margin:10px 0 24px; }
.aif-comparison::before { content:""; position:absolute; inset:4% 0 3%; background:#e5e8ff; border-radius:45% 55% 47% 53%; transform:rotate(-8deg); z-index:-1; }
.aif-comparison figure { margin:0; padding:9px 9px 0; background:#fff; border:1px solid var(--aif-rule); box-shadow:0 10px 24px rgba(46,62,121,.13); }
.aif-comparison .aif-result { position:absolute; width:65%; top:7%; right:6%; transform:rotate(4deg); z-index:2; }
.aif-result::before { content:""; position:absolute; width:70px; height:22px; top:-12px; left:calc(50% - 35px); background:rgba(250,218,134,.8); transform:rotate(-7deg); }
.aif-comparison .aif-original { position:absolute; width:36%; bottom:3%; left:1%; transform:rotate(-8deg); z-index:3; }
.aif-comparison img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; }
.aif-comparison figcaption { padding:9px 2px; text-align:center; font-weight:600; font-size:14px; line-height:1.4; }
.aif-mini-prints { position:absolute; inset:0; pointer-events:none; }
.aif-mini-prints img { position:absolute; width:25%; padding:5px; background:#fff; box-shadow:0 5px 15px rgba(46,62,121,.1); }
.aif-mini-prints img:first-child { left:5%; top:0; transform:rotate(-13deg); }
.aif-mini-prints img:last-child { right:0; bottom:0; transform:rotate(13deg); }
.aif-style-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.aif-style-picker button { appearance:none; margin:0; border:1px solid #c8cee8; background:#fff; color:var(--aif-ink); font:600 12px/1.3 Arial,Helvetica,sans-serif; letter-spacing:normal; text-transform:none; padding:9px 5px; border-radius:12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; }
.aif-style-picker img { display:block; width:44px; height:44px; object-fit:cover; border-radius:50%; }
.aif-style-picker button[aria-pressed="true"] { border-color:#5163ca; background:#5163ca; color:#fff; }
.aif-page .aif-overview { padding:36px 0; background:#fff; }
.aif-overview-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:40px; }
.aif-overview h2 { font-size:24px; letter-spacing:-.4px; }
.aif-overview p { font-size:15px; margin:0; max-width:72ch; }
.aif-facts { margin:0; display:grid; gap:12px; border-left:2px solid #e2e4ff; padding-left:26px; }
.aif-facts > div { display:grid; grid-template-columns:92px 1fr; gap:12px; }
.aif-facts dt { font-size:13px; color:#53607c; font-weight:400; }
.aif-facts dd { margin:0; font-size:14px; font-weight:600; }
.aif-jump-links { background:#fff; border-block:1px solid var(--aif-rule); }
.aif-jump-links .container { display:flex; gap:12px 30px; flex-wrap:wrap; padding-top:16px; padding-bottom:16px; }
.aif-jump-links a { color:#455492; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.aif-page .aif-section { padding:64px 0; scroll-margin-top:95px; }
.aif-section-intro { max-width:780px; margin-bottom:30px; }
.aif-tinted { background:var(--aif-paper); }
.aif-style-guide { margin-bottom:32px; }
.aif-style-guide > h3 { font-size:18px; }
.aif-medium-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.aif-medium { --medium:#dfeaff; display:block; position:relative; border:1px solid #e2e4ff; border-left:5px solid var(--medium); border-radius:8px; padding:14px 16px; color:var(--aif-ink); background:#fff; }
.aif-medium:hover { background:#f8f8ff; color:var(--aif-ink); text-decoration:none; border-color:#b2bbe6; }
.aif-medium strong { display:block; font-size:16px; color:#455492; margin-bottom:3px; }
.aif-medium span { font-size:13px; line-height:1.45; display:block; }
.aif-medium-watercolor { --medium:#72b8cb; }
.aif-medium-oil { --medium:#dab651; }
.aif-medium-cartoon { --medium:#ea8eaf; }
.aif-medium-anime { --medium:#9b8cdb; }
.aif-medium-sketch { --medium:#8795ac; }
.aif-medium-craft { --medium:#6bb8a1; }
.aif-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 20px; }
.aif-swatch { margin:0; min-width:0; padding:8px 8px 0; background:#fff; border:1px solid #e2e4ff; border-radius:4px 4px 12px 12px; box-shadow:0 3px 0 #f0f1fa; }
.aif-swatch img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:3px; background:var(--aif-paper); }
.aif-swatch figcaption { padding:13px 4px; line-height:1.35; font-size:15px; font-weight:600; color:var(--aif-heading); }
.aif-more-styles { margin-top:28px; }
.aif-more-styles > summary { display:list-item; width:fit-content; color:#455492; padding:12px 18px; border:1px solid #b5bbd7; border-radius:8px; cursor:pointer; font-weight:600; }
.aif-more-styles[open] > summary { margin-bottom:28px; }
.aif-page .aif-gallery-note { margin:24px 0 0; color:#53607c; max-width:85ch; font-size:14px; }
.aif-ideas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.aif-idea { padding:26px; background:#fff; border:1px solid #e2e4ff; border-radius:16px; display:grid; grid-template-columns:minmax(0,1fr); gap:16px 20px; align-content:start; scroll-margin-top:100px; }
.aif-idea-with-example { grid-template-columns:minmax(0,1fr) 132px; }
.aif-idea h3 { grid-column:1 / -1; grid-row:1; max-width:none; margin:0; }
.aif-idea-copy { grid-column:1; grid-row:2; min-width:0; }
.aif-idea-copy p { margin:0; }
.aif-idea p { font-size:15px; }
.aif-idea-example { grid-column:2; grid-row:2; align-self:start; width:132px; margin:0; }
.aif-idea-example img { display:block; width:100%; height:auto; border-radius:6px; }
.aif-idea-example figcaption { font-size:11px; line-height:1.4; color:#53607c; padding-top:6px; }
.aif-page .aif-tip { grid-column:1 / -1; font-size:13px; line-height:1.6; color:#53607c; padding:12px 14px; background:#f8f8ff; border-radius:8px; margin-bottom:0; }
.aif-steps { counter-reset:aif-step; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:28px; }
.aif-steps li { counter-increment:aif-step; padding-top:20px; border-top:3px solid #c7cef5; }
.aif-steps li::before { content:counter(aif-step); display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:14px 14px 14px 3px; background:#edefff; font-size:23px; font-weight:700; color:#5163ca; margin-bottom:16px; }
.aif-advice { margin-top:26px; padding:24px 28px; background:#f1f8ff; border-radius:12px; }
.aif-advice p { margin-bottom:0; max-width:95ch; }
.aif-faq-layout { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:50px; }
.aif-faq details { border-bottom:1px solid #c7cce7; padding:0; }
.aif-faq summary { padding:18px 0; color:var(--aif-ink); font-weight:600; cursor:pointer; font-size:16px; line-height:1.5; }
.aif-faq p { padding-bottom:12px; font-size:15px; }
.aif-final { display:flex; align-items:center; justify-content:space-between; gap:30px; background:#edefff; padding:36px; border-radius:20px; border-bottom:5px solid #d8ddfa; }
.aif-final > div { max-width:600px; }
.aif-final .btn-mimipanda { flex-shrink:0; }
.aif-related { margin-top:36px; padding-top:28px; border-top:1px solid var(--aif-rule); display:flex; gap:12px 24px; flex-wrap:wrap; }
.aif-related h3 { width:100%; font-size:18px; margin-bottom:0; }
.aif-related a { font-size:14px; }
@media (max-width:1199px) {
    .aif-hero-layout { gap:28px; }
    .aif-final { flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:991px) {
    .aif-hero-layout { grid-template-columns:1fr; gap:32px; }
    .aif-hero-copy { max-width:720px; }
    .aif-studio { max-width:600px; width:100%; margin:0 auto; }
    .aif-overview-layout { grid-template-columns:1fr; gap:24px; }
    .aif-medium-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .aif-faq-layout { grid-template-columns:1fr; gap:15px; }
    .aif-ideas { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:767px) {
    .aif-page .aif-hero, .aif-page .aif-section { padding:40px 0; }
    .aif-page h1 { letter-spacing:-.8px; }
    .aif-lead { font-size:17px; }
    .aif-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
    .aif-swatch { padding:5px 5px 0; }
    .aif-swatch figcaption { font-size:13px; padding:11px 3px; }
    .aif-ideas, .aif-steps { grid-template-columns:1fr; gap:20px; }
    .aif-jump-links .container { gap:10px 20px; }
    .aif-advice, .aif-final { padding:24px; }
    .aif-facts { padding-left:18px; }
}
@media (max-width:380px) {
    .aif-comparison figure { padding:5px 5px 0; }
    .aif-comparison figcaption { font-size:12px; padding:6px 0; }
    .aif-actions .btn-mimipanda { width:100%; }
    .aif-style-picker { gap:5px; }
    .aif-style-picker button { font-size:11px; }
    .aif-idea { padding:20px; }
    .aif-medium-links { grid-template-columns:1fr; }
}

@media (max-width:575px) {
    .aif-idea-with-example { grid-template-columns:minmax(0,1fr); }
    .aif-idea-example { grid-column:1; grid-row:2; width:144px; }
    .aif-idea-with-example .aif-idea-copy { grid-row:3; }
}

/* The converter follows the page's indigo ink, lavender paper and painted samples. */
.aif-page .aif-workspace { background:#fff; }
.aif-form-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:26px; }
.aif-form-heading h2 { margin-bottom:10px; }
.aif-form-heading p { margin:0; color:#53607c; }
.aif-free-note { color:#455492; background:#f3f3ff; border:1px solid #e2e4ff; border-radius:30px; padding:9px 16px; white-space:nowrap; font-size:13px; font-weight:600; }
.aif-page .aif-upload-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:0; margin:0; border:1px solid #dce0f6; border-radius:20px; overflow:hidden; background:#fff; }
.aif-upload-form::before, .aif-upload-form::after { content:none !important; display:none !important; }
.aif-upload-form > div { min-width:0; width:auto; float:none; }
.aif-photo-panel { position:relative; padding:28px; background:#f6f6ff; border-right:1px solid #e2e4ff; display:flex; flex-direction:column; }
.aif-photo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.aif-photo-toolbar h3, .aif-style-panel > h3 { margin-bottom:0; }
.aif-page .aif-link-button { display:inline-block; appearance:none; padding:0; margin:0; border:0; background:none; box-shadow:none; color:#455492; font:600 13px/1.5 Arial,Helvetica,sans-serif; text-transform:none; letter-spacing:normal; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.aif-page .aif-drop-zone { display:flex; position:relative; align-items:center; justify-content:center; flex:1; width:100%; min-height:390px; padding:24px; margin:0; border:2px dashed #b8c1ec; border-radius:14px; color:#455492; background:#fff; cursor:pointer; font:inherit; box-shadow:none; text-transform:none; letter-spacing:normal; }
.aif-page .aif-drop-zone:hover, .aif-page .aif-drop-zone.is-dragging { border-color:#5163ca; background:#fafaff; }
.aif-drop-zone [data-aif-empty] { display:flex; flex-direction:column; align-items:center; gap:12px; }
.aif-drop-zone [data-aif-empty] > img { width:112px; height:112px; margin:0 0 8px; }
.aif-drop-zone strong { font-size:20px; color:#455492; }
.aif-drop-zone span span { font-size:14px; }
.aif-drop-zone .aif-format-note { color:#6e7892; font-size:12px; }
.aif-file-input, .aif-sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; border:0 !important; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.aif-photo-panel:has(.aif-file-input:focus-visible) .aif-drop-zone { outline:3px solid #5163ca; outline-offset:3px; }
.aif-upload-preview { display:block; max-width:100%; width:auto; height:auto; max-height:390px; object-fit:contain; margin:0 auto; border-radius:6px; }
.aif-drop-zone:has(.aif-upload-preview:not([hidden])) { flex-direction:column; gap:12px; border-style:solid; padding:14px; }
.aif-file-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.aif-style-panel { padding:28px; }
.aif-filter-samples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0 22px; }
.aif-page .aif-filter-sample { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; appearance:none; border:1px solid #e0e3f4; border-radius:10px; padding:6px 6px 9px; margin:0; background:white; color:#455492; box-shadow:none; text-transform:none; letter-spacing:normal; font:600 12px/1.35 Arial,Helvetica,sans-serif; cursor:pointer; }
.aif-filter-sample img { display:block; width:100%; height:auto; aspect-ratio:1.5; object-fit:cover; border-radius:6px; margin:0; }
.aif-page .aif-filter-sample[aria-pressed="true"] { border-color:#5163ca; box-shadow:0 0 0 1px #5163ca; background:#f0f1ff; }
.aif-page .aif-filter-sample:hover { border-color:#5163ca; }
.aif-style-panel label { display:block; color:#455492; font-size:14px; font-weight:600; margin:0 0 8px; }
.aif-page .aif-style-panel input, .aif-page .aif-style-panel select { width:100%; min-width:0; max-width:100%; height:44px; border:1px solid #cbd1ee; border-radius:8px; background:#fff; padding:9px 12px; color:#1f2d56; font:14px/1.5 Arial,Helvetica,sans-serif; margin:0 0 10px; box-shadow:none; }
.aif-page .aif-style-panel select { margin-bottom:20px; padding-right:30px; }
.aif-page .aif-generate-button { display:flex; align-items:center; justify-content:center; gap:12px; width:100% !important; margin:0 0 14px; padding:14px 18px; border:0; border-radius:9px; background:#5163ca; box-shadow:0 3px 0 #3e4fae; color:white; font-size:17px; }
.aif-page .aif-generate-button:hover { background:#4254bc; color:white; }
.aif-page .aif-generate-button:disabled { opacity:.65; cursor:wait; }
.aif-page .aif-control-note { color:#6e7892; font-size:12px; line-height:1.5; margin:0 0 10px; }
.aif-status-row { margin-top:16px; }
.aif-page .aif-status-row p:empty { display:none; }
.aif-status-row p { color:#455492; font-size:14px; }
.aif-status-row.is-error p { color:#9c374e; }
.aif-page .aif-change-photo { align-self:center; margin:16px auto 0; }
.aif-progress { width:100%; padding:20px 0 0; color:#455492; }
.aif-progress-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.aif-page .aif-progress p { margin:0; font-size:14px; }
.aif-progress-heading [data-aif-percent] { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
.aif-progress-track { height:10px; overflow:hidden; background:#dfe3fa; border-radius:20px; }
.aif-progress-fill { display:block; width:10%; height:100%; border-radius:inherit; background:#5163ca; transition:width 1s linear; }
.aif-progress.is-paused .aif-progress-fill { opacity:.5; }
.aif-result-stage { display:flex; flex-direction:column; flex:1; }
.aif-result-tabs { display:flex; justify-content:center; gap:6px; margin-bottom:16px; }
.aif-page .aif-result-tabs button { font:600 12px/1.5 Arial,Helvetica,sans-serif; color:#455492; background:#fff; border:1px solid #cbd1ee; border-radius:7px; padding:7px 12px; margin:0; text-transform:none; letter-spacing:normal; box-shadow:none; cursor:pointer; }
.aif-page .aif-result-tabs button[aria-pressed="true"] { background:#5163ca; color:#fff; border-color:#5163ca; }
.aif-page .aif-result-tabs button:disabled { opacity:.5; cursor:default; }
.aif-output-image { display:block; width:100%; max-width:100%; height:340px; object-fit:contain; margin:0 0 18px; border-radius:8px; background:white; }
.aif-result-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }
.aif-page .aif-secondary-button { padding:9px 16px; border:1px solid #cbd1ee; border-radius:8px; background:white; color:#455492; font-size:14px; box-shadow:none; }
@media(max-width:991px) { .aif-form-heading { align-items:flex-start; flex-direction:column; gap:16px; } .aif-photo-panel,.aif-style-panel { padding:22px; } }
@media(max-width:767px) { .aif-page .aif-upload-form { grid-template-columns:minmax(0,1fr); } .aif-photo-panel { border-right:0; border-bottom:1px solid #e2e4ff; } .aif-page .aif-drop-zone { min-height:260px; } .aif-upload-preview { max-height:300px; } .aif-output-image { height:300px; } .aif-free-note { white-space:normal; } }
@media(prefers-reduced-motion:reduce) { .aif-progress-fill { transition:none; } }