/* IRIS Connect — clarity pass. Presentation only; course and design data stay intact. */
:root{--ink:#fff8ee;--muted:#e1d6c9;--gold:#e9c997;--line:#77685a;--radius:20px}
html{scroll-padding-top:24px}
body{background:#f3efe8;color:#302b26;font-size:15px;line-height:1.6}
.ambient{background:radial-gradient(ellipse at 90% 0%,#e7d8c3 0,transparent 45%),#f3efe8}
.ambient:after{background:none}
.shell{max-width:1440px;padding:0 36px}
.topline{height:62px;color:#51463d;letter-spacing:.12em}
.top-actions{gap:22px}
.language-picker{font-size:12px}
.language-picker select{min-height:40px;padding:8px 34px 8px 14px;background:#fffcf7;color:#382f27;border:1px solid #c9bdae;border-radius:10px}
.text-button{font-size:13px}
.hero{height:auto;min-height:150px;aspect-ratio:5.4;border-radius:20px;border:1px solid #aa9077;background:#4e4035;box-shadow:0 8px 28px #46372912}
/* One proportional panorama keeps the skull, floor and light lines continuous. */
.hero-scene{z-index:0;display:block}
.hero-panorama{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:left 55%}
.hero-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 8%,#3b30285c 28%,#31282066)}
.hero-content{position:relative;z-index:1;margin-left:clamp(185px,23%,310px);color:#fff9ed;text-shadow:0 1px 3px #271d1966}
.hero h1{font-size:38px;font-weight:400;letter-spacing:.08em;margin-bottom:8px}
.hero .eyebrow{font-size:10px;letter-spacing:.2em;color:#fff0d5}
.hero-content>p:last-child{font-size:14px;letter-spacing:.025em}
.trial-badge{z-index:1;right:18px;top:16px;background:#342b24d9;color:#fff1d9;border-color:#d7c4a37a;font-size:11px;backdrop-filter:none}
.area-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:18px;padding:6px;background:#fffcf7;border:1px solid #d8cec0;border-radius:16px;box-shadow:0 3px 12px #46372906}
.area-switch button{min-height:54px;min-width:0;justify-content:space-between;padding:12px 18px;border:1px solid transparent;border-radius:11px;background:transparent;color:#574b3f;font-size:14px;font-weight:550;box-shadow:none;letter-spacing:0}
.area-switch button span{font-size:11px;color:#776757;opacity:1;order:-1}
.area-switch button:hover{background:#eee5d9;color:#30271f;border-color:transparent;box-shadow:none}
.area-switch button[aria-pressed=true]{background:#493b30;border-color:#493b30;color:#fff4df;box-shadow:0 3px 8px #3c2e2320}
.area-switch button[aria-pressed=true] span{color:#ebcca0}
.journey-note{font-size:12px;color:#65594d;line-height:1.5;margin:12px 2px 0}
.language-note{font-size:11px;line-height:1.5;color:#74685a;margin:6px 2px 0}
.welcome{padding:28px 0 22px;align-items:center;color:#302b26}
.welcome .eyebrow,.design-heading .eyebrow,.method-heading .eyebrow,.works-heading .eyebrow{font-size:10px;color:#7c6247;opacity:1;letter-spacing:.15em}
.welcome h2,.design-heading h2,.method-heading h2,.works-heading h2{font-size:30px;font-weight:500;letter-spacing:-.035em;line-height:1.2;color:#302b26}
.welcome>p,.design-heading p:last-child,.method-heading p:last-child,.works-heading p:last-child{font-size:14px;line-height:1.6;color:#6b5d50}
.workspace{grid-template-columns:294px minmax(0,1fr);gap:28px}
.glass{background:#493e34;border:1px solid #655548;border-radius:20px;color:#fff8ee;box-shadow:0 8px 24px #3d2f2010;backdrop-filter:none;-webkit-backdrop-filter:none}
.sidebar{padding:22px 16px;top:20px;background:#40362e}
.course-top{padding:0 4px;margin-bottom:18px}.course-top .eyebrow{font-size:10px;color:#e3d3bf}.count-badge{font-size:11px;border-color:#8e7961;color:#eddfcc}
.lesson-card{padding:15px 10px;gap:10px;border-color:#6a594a;background:#493e35;border-radius:12px;grid-template-columns:32px minmax(0,1fr) 10px}
.lesson-card:hover{background:#584a3d;border-color:#ac9270}
.lesson-card[aria-current='step']{background:#5b4937;border-color:#e6c28e;box-shadow:inset 3px 0 #e6c28e}
.lesson-card b{font-size:14px;font-weight:550}.lesson-card small{font-size:11px;color:#ddd0be}.lesson-flag{font-size:9px;color:#f6d6a1;letter-spacing:.06em}
.lesson-number{width:30px;height:30px;font-size:11px;border-color:#a48a6c}
.progress-box{margin:22px 4px 0;padding-top:18px;border-color:#77614b}.progress-box>div{font-size:12px}.progress-box p{font-size:11px;color:#dfd1bd}.sidebar-note{font-size:11px;color:#dfd1bd;margin:18px 4px 0}
.lesson-heading{margin:0 0 18px;gap:12px}.lesson-heading h2{font-size:28px;font-weight:500;color:#302b26;letter-spacing:-.03em}.lesson-heading .eyebrow{font-size:10px;color:#806447}
.lesson-heading>div>p:last-child{font-size:14px;color:#6b5d50}
.status-pill{font-size:11px;padding:6px 11px;background:#eae1d4;border-color:#d5c3aa;color:#665139}
.video-frame{background:radial-gradient(ellipse at 70% 20%,#76604755,transparent 60%),#332c26;border-color:#5b4b3b;border-radius:18px}
.video-placeholder{padding:30px}.video-placeholder h3{font-size:26px;font-weight:450;color:#fff5e6}.video-placeholder p{font-size:13px;max-width:380px;color:#ddd0be}.video-placeholder .eyebrow{font-size:11px;color:#e3c697}
.play-orbit{width:58px;height:58px;margin-bottom:18px;background:#e2bf8612;box-shadow:none}
.pending-chip{font-size:11px;color:#ead7b7;border-color:#857158;margin-top:20px}
.video-foot p{font-size:12px;color:#73614e}.lesson-navigation{gap:12px;padding:16px 0 24px}.lesson-navigation>span{font-size:12px;color:#73614e}
.primary-button,.secondary-button{min-height:44px;font-size:13px;border-radius:11px;padding:11px 18px;gap:10px;font-weight:550}
.primary-button{background:#493b30;color:#fff2da;border-color:#493b30;box-shadow:none}.primary-button:hover{background:#604a35}
.secondary-button{background:#fffcf7;color:#574735;border-color:#cbbba6;box-shadow:none}.secondary-button:hover{background:#e9dfd1;border-color:#a58b69}
.primary-button:disabled,.secondary-button:disabled{opacity:.45}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #9b632c;outline-offset:3px}
.glass button:focus-visible,dialog button:focus-visible{outline-color:#ffe0a6}
.resources{color:#514234}.resource-block{border:1px solid #d3c4b0;background:#fffcf7;border-radius:14px}.resource-block summary{font-size:14px;min-height:48px;color:#493d31}
.design-area,.method-area,.works-area{padding-top:26px}
.design-heading,.method-heading,.works-heading{align-items:center;margin-bottom:20px;gap:20px}
.design-heading h2,.method-heading h2,.works-heading h2{margin:0 0 6px}
.design-frame{border:1px solid #d2c3b0;border-radius:20px;background:#302a25;box-shadow:0 12px 35px #42332212;overflow:hidden}
.design-frame iframe{display:block;width:100%;height:820px;min-height:680px;border:0;background:#302a25}
.design-disclaimer,.design-language-note{font-size:12px;color:#75634e;line-height:1.6;margin:12px 2px 0}
.method-panel{padding:24px 24px 4px}
.technical-nav button{background:#40352c;color:#fff2df;border:1px solid #947b5e;border-radius:10px;font-size:13px;min-height:46px;box-shadow:none}
.technical-nav button:hover{background:#63503d;box-shadow:none}
.technical-nav button[aria-pressed=true]{color:#382a1d;background:#e7c99c;border-color:#f3d9af;font-weight:600;box-shadow:none}
.technical-nav button:focus-visible{outline-color:#ffe2b3}
.method-panel .resource-body p{font-size:13px;line-height:1.65}.method-panel h3{font-weight:500}
.works-count{font-size:12px;background:#fffcf7;border-color:#c9b79e;color:#715737}
.works-stages{font-size:12px;color:#796044;gap:16px;margin-bottom:24px}
.works-list{gap:22px}.work-card{border:1px solid #d1c2ad;border-radius:16px;background:#fffcf7;color:#3d3025;box-shadow:0 5px 16px #4b392808;transition:transform .18s,box-shadow .18s}
.work-card:hover{transform:translateY(-3px);border-color:#aa8050;box-shadow:0 10px 25px #4b392818}
.work-copy{padding:18px;gap:9px}.work-copy .eyebrow{font-size:9px;color:#8a6b46;letter-spacing:.1em}.work-copy strong{font-size:19px;font-weight:500}.work-availability{font-size:12px;color:#78644b}
.work-cover{background:radial-gradient(ellipse at 70% 20%,#a5805255,transparent 65%),linear-gradient(135deg,#594837,#302921)}
.work-play{width:40px;height:40px;background:#e6c798;color:#30251c;border-color:#e6c798}
.works-note{font-size:13px;color:#76634d}
dialog{border:1px solid #8f7557;background:#40352c;color:#fff4e2;border-radius:20px;box-shadow:0 25px 90px #20191255}
dialog::backdrop{background:#211a15b8;backdrop-filter:blur(3px)}
.work-dialog-nav .secondary-button{background:#594633;color:#fff3dc;border-color:#9f825b}.work-dialog-nav .secondary-button:disabled{opacity:.4}.work-empty p{font-size:14px}.work-empty h3{font-size:24px}
.help-list p{font-size:14px;line-height:1.7}.help-list b{color:#ffe0ae}
footer{padding:28px 0;color:#7b6a56;border-color:#d9cdbc;font-size:12px;text-shadow:none}
@media(max-width:1000px){.shell{padding:0 24px}.workspace{grid-template-columns:260px minmax(0,1fr);gap:22px}.area-switch button{font-size:13px;padding:12px}.hero h1{font-size:34px}}
@media(max-width:800px){.workspace{grid-template-columns:1fr}.sidebar{position:static}.welcome{padding-bottom:18px}.design-heading,.method-heading{flex-direction:row}.design-frame iframe{height:850px;min-height:680px}.area-switch button{padding:12px 10px;font-size:12px}}
@media(max-width:600px){
 .shell{padding:0 16px}.topline{height:auto;min-height:66px;gap:10px;flex-wrap:wrap;padding:12px 0;font-size:9px;letter-spacing:.07em}.divider{padding:0 6px}.top-actions{gap:8px;flex-shrink:0}.language-picker>span{display:none}.language-picker select{font-size:12px;min-height:38px;min-width:116px;padding:7px 28px 7px 10px}.text-button{font-size:12px;padding:8px 0 8px 6px}.text-button span{margin-left:2px}
 .hero{height:144px;min-height:0;aspect-ratio:auto;border-radius:16px}.hero-scene:after{background:linear-gradient(90deg,#3b302800,#3128208c 45%)}.hero-content{margin-left:114px;margin-right:10px}.hero h1{font-size:clamp(22px,6vw,30px);line-height:1.16;letter-spacing:.035em;margin-bottom:8px}.hero .eyebrow{font-size:8px;letter-spacing:.12em}.hero-content>p:last-child{font-size:11px;line-height:1.5;max-width:180px}.trial-badge{top:10px;right:10px;padding:3px 8px;font-size:9px}
 .area-switch{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px;gap:5px;padding:5px;border-radius:14px}.area-switch button{min-height:48px;font-size:12px;padding:10px;gap:7px;justify-content:flex-start}.area-switch button span{font-size:10px;min-width:15px}
 .journey-note{font-size:11px;margin-top:12px}.language-note{font-size:10px;line-height:1.6;margin-top:6px}
 .welcome{padding:24px 0 18px;align-items:flex-start;gap:10px}.welcome h2,.design-heading h2,.method-heading h2,.works-heading h2{font-size:26px}.welcome>p{font-size:12px;max-width:180px;line-height:1.5}.welcome .eyebrow{font-size:9px}
 .sidebar{padding:18px 14px}.workspace{gap:24px}.lesson-card{padding:13px 10px}.lesson-card b{font-size:13px}.lesson-card small{font-size:11px}.lesson-flag{font-size:8px}
 .lesson-heading{flex-wrap:wrap;gap:10px}.lesson-heading h2{font-size:26px}.lesson-heading>div>p:last-child{font-size:13px}.lesson-heading .status-pill{margin:0;font-size:10px}.video-frame{min-height:260px}.video-placeholder{padding:24px 18px}.video-placeholder h3{font-size:22px}.video-placeholder p{font-size:12px}.play-orbit{width:48px;height:48px;margin-bottom:16px}.pending-chip{font-size:10px;margin-top:16px}
 .video-foot p{font-size:11px}.lesson-navigation{gap:8px}.lesson-navigation>span{font-size:10px;text-align:center}.primary-button,.secondary-button{font-size:12px;padding:10px 13px;gap:6px}
 .design-area,.method-area,.works-area{padding-top:24px}.design-heading,.method-heading{flex-direction:column;align-items:flex-start;gap:12px}.design-heading p:last-child,.method-heading p:last-child,.works-heading p:last-child{font-size:13px}.design-heading .secondary-button,.method-heading .secondary-button{min-height:40px;font-size:11px}
 .design-frame{margin-inline:-8px;border-radius:16px}.design-frame iframe{height:800px;min-height:720px}.design-disclaimer,.design-language-note{font-size:11px}
 .method-panel{padding:18px 14px 2px}.technical-nav button{font-size:12px;min-height:46px;padding:10px}.method-panel .technical-nav{gap:7px;margin-bottom:20px}.method-panel .resource-body p{font-size:12px}
 .works-heading{align-items:flex-start;gap:12px}.works-count{font-size:10px;padding:7px 10px}.works-list{gap:13px;grid-template-columns:repeat(2,minmax(0,1fr))}.work-copy{padding:13px 11px;gap:7px}.work-copy .eyebrow{font-size:8px;letter-spacing:.025em}.work-copy strong{font-size:17px}.work-availability{font-size:11px}.work-play{width:34px;height:34px}.works-note{font-size:12px}.work-dialog-nav .secondary-button{font-size:11px;padding:9px;gap:5px}.work-dialog-nav span{font-size:10px}
 footer{font-size:10px;gap:15px;padding:24px 0}
}
@media(max-width:370px){.shell{padding-inline:12px}.topline>span{font-size:8px}.top-actions{gap:5px}.text-button{font-size:11px}.hero-content{margin-left:100px}.hero h1{font-size:21px}.area-switch button{font-size:11px;padding:9px}.welcome{flex-direction:column}.welcome>p{max-width:none;text-align:left}.lesson-navigation .primary-button,.lesson-navigation .secondary-button{font-size:11px;padding:9px}.lesson-navigation>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.work-card:hover{transform:none}}

/* First-use guidance, without changing the complete-work video gallery. */
[hidden]{display:none!important}
.journey-entry{display:flex;gap:30px;align-items:center;margin:24px 0;padding:25px 28px;background:#fffcf7;border:1px solid #d4c3ab;border-radius:18px}
.journey-entry>div:first-child{max-width:650px}.journey-entry h2{font-size:27px;margin:7px 0 10px}
.journey-entry p:not(.eyebrow){color:#655442;font-size:14px;line-height:1.65;margin:0}
.entry-actions{display:flex;flex-direction:column;gap:8px;min-width:185px}
.entry-actions button{white-space:normal}.entry-actions .text-button{color:#6a4c29}
.intro-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:28px;box-sizing:border-box;overflow:auto}
.intro-dialog h2{font-size:30px;font-weight:500;letter-spacing:-.025em;margin:10px 0}
.intro-lead{font-size:15px;line-height:1.65;color:#eadcc9}
.method-scales{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0}
.method-scales figure{margin:0;border:1px solid #82694e;border-radius:12px;overflow:hidden;background:#302a25}
.method-scales img,.method-scales svg{display:block;height:220px;width:100%;object-fit:contain}
.method-scales figcaption{padding:16px}.method-scales figcaption b{font-size:16px;color:#ffe0ae}.method-scales p{font-size:13px;line-height:1.65;margin:8px 0 0;color:#efdfc9}
.method-glossary,.help-details{border-top:1px solid #806a51;margin:18px 0;padding-top:12px}
.method-glossary summary,.help-details summary{font-size:14px;cursor:pointer;min-height:44px;line-height:1.5;padding:8px 0}
.method-glossary dl{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;font-size:13px;line-height:1.6}.method-glossary dt{color:#ffe0ae;font-weight:600}.method-glossary dd{margin:0;color:#efdfc9}
.intro-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.intro-actions .primary-button,#help-done{background:#e7c99c;color:#32271e}
.practice-note{display:flex;align-items:center;gap:15px;border:1px solid #c9ad84;background:#fff5e4;padding:16px 20px;border-radius:12px;margin:0 0 18px;color:#493723}
.practice-note p{font-size:14px;line-height:1.6;margin:0;flex:1}.practice-note .text-button{color:#624625}
.concept-navigation{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #806a51;margin-top:22px;padding:20px 0}
.concept-navigation .primary-button{background:#e7c99c;color:#32271e}.concept-navigation span{font-size:12px;white-space:nowrap;color:#e4cdae}
.resource-note{line-height:1.65}
@media(max-width:700px){
 .journey-entry{flex-direction:column;align-items:stretch;gap:18px;padding:20px;margin:20px 0}.journey-entry h2{font-size:25px}.journey-entry p:not(.eyebrow){font-size:14px}
 .entry-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}.entry-actions button{min-height:48px;font-size:13px}#resume-design{grid-column:1/-1}
 .intro-dialog{padding:20px}.intro-dialog h2{font-size:26px}.intro-lead{font-size:14px}
 .method-scales{grid-template-columns:1fr;gap:14px}.method-scales figure{display:grid;grid-template-columns:100px 1fr;align-items:center}.method-scales img,.method-scales svg{height:180px}.method-scales figcaption{padding:12px}.method-scales figcaption b{font-size:14px}.method-scales p{font-size:13px}
 .method-glossary dl{grid-template-columns:1fr;gap:5px}.method-glossary dd{margin-bottom:10px}
 .intro-actions{flex-direction:column}.intro-actions button{width:100%;min-height:48px}
 .concept-navigation{flex-wrap:wrap;gap:8px}.concept-navigation button{font-size:12px;padding:10px;flex:1}.concept-navigation span{order:-1;flex-basis:100%;text-align:center}
 .practice-note{flex-direction:column;align-items:flex-start;gap:8px;padding:15px}.practice-note p{font-size:13px}
 .design-frame iframe{min-height:0}
}

.example-details{margin:16px 0;border-top:1px solid #806a51;padding-top:8px}.example-details summary{cursor:pointer;min-height:44px;padding:10px 0;font-size:13px;color:#efdbbb}.example-details .resource-note{margin-top:8px}

.division-explanations img{background-image:linear-gradient(140deg,rgba(235,225,211,.64),rgba(176,155,132,.35)),url('assets/iris-design-scene-clean.webp')}

/* Keep the original panorama above a single-screen, side-by-side mobile studio. */
.mobile-design-brand{display:none}
@media(max-width:700px), (max-height:500px) and (max-width:1000px){
 html[data-iris-area=design],html[data-iris-area=design] body{height:100%;overflow:hidden;overscroll-behavior:none}
 html[data-iris-area=design] .shell{display:flex;flex-direction:column;height:100dvh;max-width:none;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);box-sizing:border-box;background:#827265;overflow:hidden}
 html[data-iris-area=design] .shell>:not(#design-area):not(.hero){display:none!important}
 html[data-iris-area=design] .hero{flex:none;width:calc(100% - 12px);height:clamp(88px,14dvh,118px);min-height:0;aspect-ratio:auto;margin:6px 6px 0;border-radius:13px}
 html[data-iris-area=design] .hero-content{margin-left:29%;padding:0 10px 0 0}
 html[data-iris-area=design] .hero h1{font-size:clamp(21px,6vw,29px);max-width:none;line-height:1.1;letter-spacing:.04em;margin:5px 0}
 html[data-iris-area=design] .hero .eyebrow{font-size:8px;letter-spacing:.1em;margin:0}
 html[data-iris-area=design] .hero-content>p:last-child{font-size:9px;line-height:1.4;max-width:220px;margin:0}
 html[data-iris-area=design] .trial-badge{display:none}
 html[data-iris-area=design] #design-area{flex:1;min-height:0;display:flex;flex-direction:column;box-sizing:border-box;padding:0;overflow:hidden}
 html[data-iris-area=design] .design-heading{display:flex;flex-direction:row;flex:none;align-items:center;justify-content:space-between;gap:6px;margin:0;padding:2px 10px;min-height:38px;box-sizing:border-box}
 html[data-iris-area=design] .design-heading>div{display:none}
 html[data-iris-area=design] .mobile-design-brand{display:block;text-transform:uppercase;font-size:13px;letter-spacing:.08em;font-weight:500;color:#fff1d9;white-space:nowrap}
 html[data-iris-area=design] #back-training{min-height:34px;padding:5px 0 5px 8px;font-size:11px;background:transparent;border:0;color:#fff4e3}
 html[data-iris-area=design] .design-frame{flex:1;min-height:0;display:flex;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
 html[data-iris-area=design] .design-frame iframe{flex:1;width:100%;height:100%;min-height:0;background:transparent}
 html[data-iris-area=design] .design-disclaimer,html[data-iris-area=design] .design-language-note{display:none}
 html[data-iris-area=design] .practice-note{flex:none;flex-direction:row;align-items:center;gap:8px;margin:0;padding:4px 10px;border:0;border-radius:0;background:#493b30;color:#fff0d7}
 html[data-iris-area=design] .practice-note>strong{display:none}
 html[data-iris-area=design] .practice-note p{font-size:11px;line-height:1.35}
 html[data-iris-area=design] .practice-note button{min-height:32px;padding:4px;color:#ffe0ae;font-size:11px}
}
@media(max-height:500px) and (min-width:500px) and (max-width:1000px){
 html[data-iris-area=design] .hero{height:62px;margin-top:4px}
 html[data-iris-area=design] .hero-content{margin-left:20%;padding-right:180px}
 html[data-iris-area=design] .hero h1{font-size:23px;margin:3px 0}
 html[data-iris-area=design] .hero-content>p:last-child{display:none}
 html[data-iris-area=design] .design-heading{position:absolute;right:15px;top:17px;z-index:2;padding:0;min-height:32px}
 html[data-iris-area=design] .mobile-design-brand{display:none}
}