/* Island Studio v2. Approved Brand Kit, 2026-10-29. */
html:not([data-contrast="more"]) {
 --island-rice:#faf6ec;--island-forest:#244b40;--island-sage:#90ab86;--island-apricot:#dd704e;
 --island-surface:#fffdf8;--island-soft:#eef0e4;--island-muted:#59695e;--island-line:#d9dfd0;--island-orange:#a8422c;
 --ink:#244b40;--muted:#59695e;--line:#d9dfd0;--soft:#eef0e4;--paper:#faf6ec;--blue:#244b40;
 --milu-cream:#faf6ec;--milu-mint:#e8eedf;--milu-peach:#f8e4d7;--milu-cocoa:#244b40;--milu-forest:#244b40;
 --focus:#a8422c;--selected-bg:#244b40;--selected-text:#fffdf8;
}
html[data-theme="dark"]:not([data-contrast="more"]) {
 --island-rice:#182d26;--island-forest:#e5efde;--island-sage:#b5cba8;--island-apricot:#efa582;
 --island-surface:#20382f;--island-soft:#293f32;--island-muted:#bfcebd;--island-line:#465c4b;--island-orange:#ffb795;
 --ink:#e5efde;--muted:#bfcebd;--line:#465c4b;--soft:#293f32;--paper:#182d26;--blue:#c4d9b5;
 --milu-cream:#182d26;--milu-mint:#293f32;--milu-peach:#463c30;--milu-cocoa:#e5efde;--milu-forest:#c4d9b5;
 --focus:#ffb795;--selected-bg:#c4d9b5;--selected-text:#182d26;
}
body{background:var(--paper);color:var(--ink)}
.milu-brand-icon{padding:3px!important;background:#faf6ec!important;border-radius:13px!important;object-fit:contain}
html:not([data-contrast="more"]) :is(.milu-workbench,.milu-static) {
 --ink:var(--island-forest);--paper:var(--island-rice);--panel:var(--island-soft);
 --muted:var(--island-muted);--line:var(--island-line);--ui-paper:var(--island-rice);--ui-soft:var(--island-soft);
 --accent:var(--island-forest);--blue:var(--island-forest);background:var(--island-rice);color:var(--island-forest)
}
:is(.milu-workbench,.milu-static) .nav{max-width:1200px;min-height:80px;height:auto;padding-block:15px;border-bottom:1px solid var(--line)}
:is(.milu-workbench,.milu-static) .hero{padding-block:46px 34px}
:is(.milu-workbench,.milu-static) .hero::before{width:54px;height:54px;background-image:url('./brand/milu-mark-v2.svg')}
:is(.milu-workbench,.milu-static) :is(h1,h2,h3){letter-spacing:-.035em}
:is(.milu-workbench,.milu-static) .hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.2;font-weight:650}
:is(.milu-workbench,.milu-static) .hero :is(.lead,.hero-description){max-width:680px;line-height:1.8}
html:not([data-contrast="more"]) :is(.milu-workbench,.milu-static) :is(.tool-card,.workspace,.panel,.result-card,.upload-card,.privacy-callout,.legal) {
 border-color:var(--line);border-radius:24px;box-shadow:0 8px 28px #244b4005
}
html:not([data-contrast="more"]) :is(.milu-workbench,.milu-static) :is(.tool-card,.workspace,.upload-card){background:var(--island-surface)}
:is(.milu-workbench,.milu-static) :is(.hero-button,.primary,.primary-button,.btn-primary){border-radius:999px;min-height:44px}
:is(.milu-workbench,.milu-static) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),select,textarea){border-radius:12px}
:is(.milu-workbench,.milu-static) :is(.hero-choices,.hero-starters,.hero-tasks,.hero-types) button{border-radius:16px;line-height:1.5}
:is(.milu-workbench,.milu-static) footer{border-top:1px solid var(--line);padding-block:28px;row-gap:12px}
.nav :is(.site-controls button,.controls button){min-height:44px;min-width:40px}
:is(.home-page,.tools-page,.content-page) .nav{max-width:1200px;min-height:84px;height:auto;padding-block:18px;border-bottom-color:var(--line)}
:is(.home-page,.tools-page,.content-page) .logo b{font-size:20px;letter-spacing:-.04em;color:var(--ink)}
:is(.home-page,.tools-page,.content-page) .nav-links{color:var(--muted);font-size:14px}
:is(.home-page,.tools-page,.content-page) .nav-button{min-height:44px;padding-inline:20px}
:is(.home-page,.tools-page,.content-page) :is(.guide-card,.collection-card,.directory-card,.featured-tool,.recent-tools,.content-card){border:1px solid var(--line);background:var(--island-surface,var(--paper));border-radius:24px;box-shadow:none}
:is(.content-page,.tools-page) :is(.content-hero,.tools-hero){padding-top:64px;padding-bottom:44px}
:is(.content-page,.tools-page) :is(.content-hero,.tools-hero) h1{font-weight:650;letter-spacing:-.05em;line-height:1.15}
.content-page .content-hero::before{background-image:url('/brand/milu-mark-v2.svg')}
:is(.content-page,.tools-page) :is(.content-section,.legal-content,.collection-section){border-color:var(--line)}
html:not([data-contrast="more"]) :is(.home-page,.tools-page,.content-page) :is(.nav-links a:hover,.tool-command-trigger){color:var(--ink)}
:is(.home-page,.tools-page,.content-page) footer{border-color:var(--line);padding-block:32px;color:var(--muted)}
.home-page .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-width:1248px;min-height:620px;margin:auto;padding:66px 32px 60px;gap:28px;overflow:visible;background:transparent;text-align:left}
.home-page .hero-copy{max-width:none;text-align:left;min-width:0}
.home-page .hero .kicker{font-size:12px;letter-spacing:.08em;line-height:1.6;margin:0 0 23px;color:var(--muted)}
.home-page .hero h1{font-size:clamp(43px,4.8vw,66px);line-height:1.16;letter-spacing:-.055em;font-weight:650;margin:0 0 24px;text-wrap:balance}
.home-page .hero-intro{font-size:17px;line-height:1.85;max-width:500px;margin:0 0 28px;color:var(--muted)}
.home-page .hero-actions{justify-content:flex-start;margin:24px 0 0;gap:20px}
.home-page .hero-link{font-size:14px;padding:0 23px;min-height:48px;border-radius:999px}
.home-page .hero-secondary{font-size:13px;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;gap:8px}
.home-page .hero-assurance{margin:18px 0 0;font-size:12px;color:var(--muted)}
.island-hero-art{position:relative;isolation:isolate;min-width:0;align-self:center}
.island-hero-art>img{width:100%;height:auto;display:block;aspect-ratio:1;object-fit:contain}
.island-art-note{position:absolute;left:1%;top:5%;font-size:12px;line-height:1.6;padding:13px 18px;background:var(--island-surface);border:1px solid var(--line);border-radius:20px 20px 20px 4px;transform:rotate(-5deg);box-shadow:0 8px 24px #244b4008}
.island-art-caption{text-align:center;font-size:11px;letter-spacing:.12em;color:var(--muted);margin:-12px 0 0}
.island-search{display:flex;align-items:center;gap:12px;padding:7px 7px 7px 18px;background:var(--island-surface);border:1px solid var(--line);border-radius:18px;max-width:510px;box-shadow:0 5px 24px #244b4006}
.island-search>svg{width:20px;height:20px;flex-shrink:0;color:var(--muted)}
.island-search input{min-width:0;width:100%;min-height:44px;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;padding:0}
.island-search:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.island-search input::placeholder{color:var(--muted);opacity:1}
.island-search button{background:var(--blue);color:var(--paper);min-width:50px;min-height:46px;border:0;border-radius:13px;font:inherit;font-size:20px;cursor:pointer}
.island-quick{display:flex;flex-wrap:wrap;gap:4px 14px;margin:9px 0 0;font-size:12px;color:var(--muted)}
.island-quick a{display:inline-flex;align-items:center;min-height:40px;text-decoration:underline;text-underline-offset:4px}
.island-quick a:hover{color:var(--ink)}
.home-page :is(.home-collections,.home-guides,.discovery){max-width:1184px;margin-inline:auto}
.home-page .home-collection-grid>a{background:var(--island-surface);border-radius:22px}
.home-page .home-collection-grid>a:nth-child(2){background:color-mix(in srgb,var(--milu-peach) 45%,var(--island-surface))}
.home-page .home-collection-grid>a:nth-child(3){background:color-mix(in srgb,var(--milu-mint) 60%,var(--island-surface))}
.home-page :is(.home-collections-head h2,.home-guides-head h2){font-size:clamp(26px,3vw,36px);letter-spacing:-.04em}
.home-page .about{background:var(--island-soft);border-radius:28px}
.media-feature{max-width:1184px;margin:30px auto 70px;padding:38px 44px;background:var(--island-soft);border:1px solid var(--line);border-radius:28px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:35px;align-items:center}
.media-feature-label{font-size:11px;letter-spacing:.13em;color:var(--island-orange);font-weight:700;margin:0 0 13px}
.media-feature h2{font-size:clamp(27px,3vw,39px);font-weight:650;letter-spacing:-.045em;line-height:1.25;margin:0 0 15px}
.media-feature-copy>p:not(.media-feature-label){font-size:15px;line-height:1.8;color:var(--muted);max-width:560px}
.media-feature-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.media-feature-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;background:var(--island-surface);border:1px solid var(--line);border-radius:999px;font-size:13px;font-weight:600}
.media-feature-actions a:first-child{background:var(--blue);color:var(--paper);border-color:transparent}
.media-feature-visual{border:1px solid var(--line);border-radius:23px;padding:25px;background:var(--island-surface);transform:rotate(2deg)}
.media-feature-visual>span{font-size:10px;letter-spacing:.11em;color:var(--muted)}
.media-wave{height:78px;display:flex;align-items:center;justify-content:center;gap:5px;margin:14px 0}
.media-wave i{display:block;width:6px;border-radius:99px;background:var(--island-sage)}
.media-formats{display:flex;justify-content:center;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.media-formats b{color:var(--ink);font-size:17px;font-weight:600}
.media-feature-visual>small{display:block;text-align:center;margin-top:20px;color:var(--muted);font-size:11px}
html[data-contrast="more"] .media-feature,html[data-contrast="more"] .media-feature-visual,html[data-contrast="more"] .island-search,html[data-contrast="more"] .island-art-note{background:var(--paper);border:2px solid currentColor}
@media(max-width:1000px){.home-page .hero{gap:12px;padding:45px 28px}.home-page .hero h1{font-size:47px}.home-page .hero-intro{font-size:16px}.media-feature{margin-inline:24px}.island-art-note{font-size:11px;padding:10px 14px}}
@media(max-width:760px){
 :is(.home-page,.tools-page,.content-page) .nav{min-height:76px;padding:14px 20px;gap:8px}
 :is(.home-page,.tools-page,.content-page) .logo b{font-size:18px}
 .home-page .hero{grid-template-columns:1fr;padding:38px 22px 34px;min-height:0;gap:24px;text-align:left}
 .home-page .hero-copy{max-width:560px;margin:auto;width:100%}
 .home-page .hero h1{font-size:clamp(38px,9vw,52px);margin-bottom:20px;line-height:1.2}
 .home-page .hero .kicker{font-size:11px;margin-bottom:17px}
 .home-page .hero-intro{font-size:15px;margin-bottom:23px}
 .island-hero-art{width:min(100%,360px);margin:auto}
 .island-art-note{left:0;top:9%;font-size:11px}
 .island-art-caption{font-size:10px;margin-top:-4px}
 .island-search{max-width:none;gap:9px;padding-left:13px}
 .island-search input{font-size:14px}
 .home-page .hero-actions{gap:17px;margin-top:20px}
 .home-page .hero-assurance{font-size:11px}
 .media-feature{grid-template-columns:1fr;margin:10px 20px 42px;padding:26px 22px;gap:25px;border-radius:24px}
 .media-feature h2{font-size:29px}
 .media-feature-copy>p:not(.media-feature-label){font-size:14px}
 .media-feature-visual{transform:none;padding:20px}
 .media-feature-actions{gap:8px}
 .media-feature-actions a{font-size:12px;padding-inline:14px}
 :is(.content-page,.tools-page) :is(.content-hero,.tools-hero){padding-top:36px;padding-bottom:28px}
 :is(.milu-workbench,.milu-static) .nav{min-height:76px;padding-block:14px}
 :is(.milu-workbench,.milu-static) .hero{padding-block:30px 26px}
 :is(.milu-workbench,.milu-static) .hero h1{font-size:clamp(30px,7.5vw,42px)}
}
@media(max-width:360px){.home-page .hero{padding-inline:17px}.home-page .hero h1{font-size:37px}.island-search input{font-size:13px}.island-search{gap:7px}.home-page .hero-link{padding-inline:17px;font-size:13px}.home-page .hero-secondary{font-size:12px}.media-feature{margin-inline:14px;padding-inline:19px}.media-feature h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Narrow cards keep their contents inside the page, including long format labels. */
.media-feature>*{min-width:0}.media-feature-visual{max-width:100%}.media-formats{flex-wrap:wrap}.media-feature-actions a{max-width:100%;text-align:center}
@media(max-width:760px){.media-feature{grid-template-columns:minmax(0,1fr)}}
html[data-theme="dark"] .tool-directory-cta>a span{color:inherit!important;font-size:inherit!important;line-height:inherit!important}
