/* Adopted integrated palette: shared violet controls, warm simulator canvas.
   This layer changes presentation only; user photo/color and geometry are retained. */
@font-face{font-family:"DM Sans";src:url('/fonts/dmsans.ttf');font-display:swap}
:root{color-scheme:light;--brand-accent:#655b87;--brand-soft:#eeeaf6;--brand-edge:#9990b3;--brand-bg:#f8f8fb;--brand-ink:#35343e;--brand-muted:#6e6b7b;--brand-line:#dcd8e6}
body{background:var(--brand-bg)}
#oshi-rough{--oa-lime:var(--brand-accent);--oa-lime-deep:var(--brand-accent);--oa-ink:var(--brand-ink);--oa-subtle:var(--brand-muted);--oa-line:var(--brand-line);--oa-cloud:var(--brand-bg);--oa-paper:#fff;--oa-pink:#e788ae}
#oshi-rough .oa-canvas{background:radial-gradient(ellipse at 45% 46%,#f2e4e8 0%,#fbf7f4 72%)}
#oshi-rough .oa-rail-button,#oshi-rough .oa-rail-guide{position:relative;border-radius:19px 19px 15px 19px;box-shadow:0 3px 0 var(--brand-line)}
#oshi-rough .oa-rail-button[aria-pressed="true"],#oshi-rough .oa-rail-guide[aria-pressed="true"]{color:var(--brand-accent);background:var(--brand-soft);border:1px solid var(--brand-edge)}
#oshi-rough .oa-rail-button[aria-pressed="true"]::before{content:'✦';position:absolute;top:-8px;left:-5px;color:var(--brand-accent);font-size:16px;pointer-events:none}
#oshi-rough .oa-action.is-primary:not(:disabled),#oshi-rough .oa-save-menu #oa-save-plan,#oshi-rough .oa-crop-head .oa-crop-apply,#oshi-rough .oa-share-sheet .oa-share-primary,#oshi-rough .oa-recipe-actions .oa-recipe-share,#oshi-rough .oa-recipe-actions .oa-recipe-edit.is-current-primary{color:#fff;background:var(--brand-accent);border-color:var(--brand-accent);border-radius:17px 17px 13px 17px;box-shadow:0 3px 0 var(--brand-edge)}
#oshi-rough .oa-good:not(.has-photo)::after{color:#963e68}
#oshi-rough .oa-crop-stage{background:#e6e3ec}
#oshi-rough .oa-crop-shape-button[aria-pressed="true"]{color:var(--brand-accent);background:var(--brand-soft);border-color:var(--brand-edge);box-shadow:inset 0 0 0 1px var(--brand-edge)}
#oshi-rough .oa-boot-screen{background:#fff}
#oshi-rough .oa-loading-brand{width:210px;max-width:80vw}
#oshi-rough .oa-loading-brand svg{display:block;width:100%;height:auto}
#oshi-rough .oa-boot-bag{width:224px;height:250px;margin:12px 0}
#oshi-rough .oa-boot-bag>svg{display:block;width:100%;height:100%}
#oshi-rough .oa-loading-good{transform-box:fill-box;transform-origin:center;animation:oa-integrated-arrive 2.4s ease both infinite}
@keyframes oa-integrated-arrive{0%{opacity:0;transform:translateY(-10px) scale(.7)}75%,100%{opacity:1;transform:none}}
/* Staggered tracks share a cycle: all nine are visible before the existing 2.4s minimum ends. */
#oshi-rough .oa-loading-good[style="--i:0"]{animation-name:oa-integrated-0}
@keyframes oa-integrated-0{0%,0%{opacity:0;transform:translateY(-10px) scale(.7)}15%,100%{opacity:1;transform:none}}
#oshi-rough .oa-loading-good[style="--i:1"]{animation-name:oa-integrated-1}
@keyframes oa-integrated-1{0%,6%{opacity:0;transform:translateY(-10px) scale(.7)}21%,100%{opacity:1;transform:none}}
#oshi-rough .oa-loading-good[style="--i:2"]{animation-name:oa-integrated-2}
@keyframes oa-integrated-2{0%,12%{opacity:0;transform:translateY(-10px) scale(.7)}27%,100%{opacity:1;transform:none}}
#oshi-rough .oa-loading-good[style="--i:3"]{animation-name:oa-integrated-3}
@keyframes oa-integrated-3{0%,18%{opacity:0;transform:translateY(-10px) scale(.7)}33%,100%{opacity:1;transform:none}}
#oshi-rough .oa-loading-good[style="--i:4"]{animation-name:oa-integrated-4}
@keyframes oa-integrated-4{0%,24%{opacity:0;transform:translateY(-10px) scale(.7)}39%,100%{opacity:1;transform:none}}
#oshi-rough .oa-loading-good[style="--i:5"]{animation-name:oa-integrated-5}
@keyframes oa-integrated-5{0%,30%{opacity:0;transform:translateY(-10px) scale(.7)}45%,100%{opacity:1;transform:none}}
#oshi-rough .oa-loading-good[style="--i:6"]{animation-name:oa-integrated-6}
@keyframes oa-integrated-6{0%,36%{opacity:0;transform:translateY(-10px) scale(.7)}51%,100%{opacity:1;transform:none}}
#oshi-rough .oa-loading-good[style="--i:7"]{animation-name:oa-integrated-7}
@keyframes oa-integrated-7{0%,42%{opacity:0;transform:translateY(-10px) scale(.7)}57%,100%{opacity:1;transform:none}}
#oshi-rough .oa-loading-good[style="--i:8"]{animation-name:oa-integrated-8}
@keyframes oa-integrated-8{0%,48%{opacity:0;transform:translateY(-10px) scale(.7)}63%,100%{opacity:1;transform:none}}

.site-header .site-brand{display:block;width:min(175px,100%);line-height:0}
.site-header .site-brand svg{display:block;width:100%;height:auto}
.site-document a{color:var(--brand-accent)}
.site-document .back{background:var(--brand-accent);color:white}
.site-document .stepnum{background:var(--brand-soft);color:var(--brand-accent)}
#oshi-rough button:focus-visible,.site-document a:focus-visible{outline:3px solid var(--brand-accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){#oshi-rough .oa-loading-good{animation:none;opacity:1;transform:none}}

/* Supporting explanations use the same neutral/violet palette. Measurement blue remains semantic. */
.site-document .flow span{background:var(--brand-soft);color:var(--brand-ink)}
.site-document .art text{fill:var(--brand-ink)}
.site-document .art .blue{fill:#007cac}
.site-document summary::marker{color:var(--brand-accent)}
.site-document summary:focus-visible,.site-header a:focus-visible,.site-footer a:focus-visible{outline:3px solid var(--brand-accent);outline-offset:3px}
#oshi-rough .oa-note{background:var(--brand-bg)}