/* The interactive CV: luminous instruments, a career journal and a conversation.
   Static materials carry the design; only direct interaction adds brief motion. */
.chapter-scene {
    --studio-accent: #b7a2ff;
    --studio-companion: #67b5ff;
    --studio-ink: #f6f3ff;
    --studio-muted: #c5c8e3;
    box-shadow: 0 22px 48px #070c1d26, inset 0 1px 0 #d2c7ff24;
}
.chapter-scene::before {
    content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--studio-accent), transparent);
    opacity: .65; pointer-events: none;
}
.chapter-workspace { container-type: inline-size; }
.chapter-workspace h3 { max-width: 24ch; }
.chapter-scene .chapter-instruction { color: var(--studio-muted); margin-bottom: 28px; }
.chapter-choices { gap: 10px; margin-bottom: 30px; }
.chapter-choices button {
    position: relative; gap: 9px; min-height: 46px; padding: 10px 16px;
    border: 1px solid #a9b4d432; border-radius: 12px;
    background: linear-gradient(145deg, #d8d6ff0c, #b6c8ff03); color: #dce0f4;
    font-size: .82rem; font-weight: 550;
    transition: background-color 180ms, color 180ms, border-color 180ms, translate 220ms ease-out, box-shadow 220ms;
}
.chapter-choices button > .bi { font-size: 1.05rem; color: var(--studio-accent); }
.chapter-choices button[aria-pressed="true"] {
    background: linear-gradient(115deg, var(--studio-accent), var(--studio-companion));
    border-color: transparent; color: #10213b;
    box-shadow: 0 6px 18px #03071640, inset 0 1px 0 #ffffff6b;
}
.chapter-choices button[aria-pressed="true"] > .bi { color: #10213b; }
.chapter-choices button:focus-visible { outline: 3px solid #e5ddff; outline-offset: 4px; }

/* Skills become connected, raised instruments, with a signature hue per discipline. */
.chapter-skills { --studio-accent: #84e2ec; --studio-companion: #8faaff; }
.chapter-skills[data-choice="1"] { --studio-accent: #bca5ff; --studio-companion: #92b8ff; }
.chapter-skills[data-choice="2"] { --studio-accent: #86d5ff; --studio-companion: #8be4dd; }
.chapter-skills[data-choice="3"] { --studio-accent: #d2a6ff; --studio-companion: #a2aaff; }
.chapter-skills[data-choice="4"] { --studio-accent: #b8c4ff; --studio-companion: #87dbe6; }
.chapter-skills[data-choice="5"] { --studio-accent: #a5b8ff; --studio-companion: #c2a8fb; }
.chapter-skills .chapter-detail-title { color: #dcebf9; font-size: 1.07rem; margin-bottom: 24px; }
.studio-workbench { gap: 22px; min-height: 196px; align-items: stretch; padding-block: 6px 16px; }
.workbench-tool {
    display: flex; flex-direction: column; justify-content: center; gap: 23px;
    min-height: 192px; padding: 25px 14px 30px; border-radius: 16px;
    background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--studio-accent) 17%, transparent), transparent 75%), linear-gradient(150deg, #23364c, #142235 70%);
    box-shadow: inset 0 1px 0 #d8f2ff42, inset 0 -1px 0 #060e23, 0 12px 24px #030b164d;
    font-size: clamp(.95rem, 1.4vw, 1.25rem); line-height: 1.25; overflow: hidden;
}
.workbench-tool::before { content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, var(--studio-accent), transparent); opacity: .8; }
.workbench-tool::after { content: ''; position: absolute; inset: -30% -100%; background: linear-gradient(110deg, transparent 40%, #d8f4ff14 48%, transparent 57%); transform: translateX(-45%); pointer-events: none; opacity: 0; }
.tool-traces { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--studio-accent); stroke-width: 1; opacity: .2; pointer-events: none; }
.tool-symbol {
    position: relative; display: grid; place-items: center; width: 65px; height: 65px; flex: 0 0 auto; border-radius: 19px;
    background: linear-gradient(140deg, color-mix(in srgb, var(--studio-accent) 90%, white), var(--studio-companion));
    box-shadow: inset 0 2px 1px #ffffff70, inset 0 -3px 4px #1c355531, 0 10px 21px #030b2259;
    color: #132947; rotate: -6deg; transition: rotate 280ms ease-out;
}
.tool-symbol > i.bi { position: static; width: auto; height: auto; background: none; color: inherit; border-radius: 0; font-size: 30px; line-height: 1; }
.workbench-tool:nth-child(3) .tool-symbol { rotate: 3deg; }
.workbench-tool:nth-child(4) .tool-symbol { rotate: 7deg; }
.workbench-tool > span { position: relative; z-index: 1; text-wrap: balance; color: #edf6ff; }
.workbench-tool > i.tool-port { width: 27px; height: 3px; bottom: 14px; background: var(--studio-accent); opacity: .8; }
.workbench-beam { top: 49%; height: 1px; background: linear-gradient(90deg, transparent, var(--studio-accent), transparent); opacity: .75; }
.workbench-beam span { height: 2px; background: #fff; }
.chapter-skill-list { gap: 10px; margin-top: 18px; }
.chapter-skill-list li {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #829fb52b; border-radius: 9px;
    background: linear-gradient(120deg, #bddbfa09, #bddbfa02); color: #d5e4f2; line-height: 1.4;
}
.chapter-skill-list li::before { content: ''; width: 4px; height: 4px; flex-shrink: 0; border-radius: 50%; background: var(--studio-accent); }

/* About: a small illuminated system, from an idea to its implementation. */
.studio-orbit { grid-template-columns: 1fr minmax(160px, 1.3fr) 1fr; gap: 16px; padding-top: 20px; }
.studio-orbit .orbit-geometry { top: 0; height: 230px; color: #ae9be7; opacity: .45; }
.orbit-core { display: flex; flex-direction: column; justify-content: center; gap: 14px; aspect-ratio: 1; max-width: 210px; width: 100%; margin: auto; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #6262a9, #343159 55%, #201c39); box-shadow: inset 0 2px 0 #d9d2ff52, inset 0 -2px 0 #05071b, 0 20px 35px #09091b6b; font-size: clamp(1.05rem, 1.8vw, 1.6rem); padding: 18px; }
.orbit-core > i { font-size: 2.8rem; line-height: 1; color: #d3c4ff; }
.orbit-core > span { color: #f2ecff; }
.orbit-input, .orbit-output { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; color: #e4dff8; font-size: .82rem; }
.orbit-input > i, .orbit-output > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #bfa5fa17; color: #d5c4ff; font-size: 1.2rem; }
.studio-orbit p { margin-top: 8px; padding-top: 22px; min-height: 0; color: #d4cfe7; max-width: 62ch; justify-self: center; }

/* A career dossier: identity above a connected list of actual responsibilities. */
.chapter-experience .chapter-choices { padding-bottom: 20px; border-bottom: 1px solid #bca9eb25; }
.chapter-experience .chapter-choices button { flex: 1 1 auto; }
.chapter-experience .career-window { position: relative; padding: 28px; border-radius: 16px; background: radial-gradient(ellipse at 100% 0, #8270c629, transparent 60%), linear-gradient(130deg, #29253f, #1c1d32); box-shadow: inset 0 1px 0 #ddcdff2b, 0 16px 30px #08091938; }
.career-company-mark { float: right; width: 74px; height: 74px; padding: 8px; margin: 0 0 14px 18px; border-radius: 14px; background: #fff; box-shadow: 0 7px 16px #09071433; }
.career-company-mark img { width: 100%; height: 100%; object-fit: contain; }
.career-window .career-date { display: flex; gap: 9px; align-items: center; width: fit-content; font-size: .8rem; color: #d3c0ff; margin-bottom: 15px; line-height: 1.6; }
.career-window > strong { font-size: clamp(1.3rem, 2.1vw, 1.8rem); max-width: 30ch; }
.career-window > p { margin-top: 9px; color: #c4d6ff; }
.career-location { color: #c0bdd4; line-height: 1.65; }
.career-responsibilities { clear: both; position: relative; list-style: none; padding: 24px 0 0; gap: 0; margin-top: 22px; }
.career-responsibilities li { position: relative; padding: 0 0 20px 27px; color: #e0dcee; }
.career-responsibilities li::before { content: ''; position: absolute; top: 8px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #c5a4ff, #82b8ff); box-shadow: 0 0 0 5px #b394ec12; }
.career-responsibilities li:not(:last-child)::after { content: ''; position: absolute; top: 21px; bottom: 4px; left: 3px; width: 1px; background: #bdabeb35; }
.career-responsibilities li:last-child { padding-bottom: 0; }

/* Education keeps the paper metaphor with embossed, editorial detail. */
.chapter-education { --studio-accent: #e1bcec; --studio-companion: #b8beff; }
.studio-notebook { padding: 9px 9px 12px 23px; background: linear-gradient(120deg, #69515f, #9d8194 48%, #5e4b69); border-radius: 10px 16px 16px 10px; }
.notebook-spine { left: 12px; background: #d0b3c28c; }
.notebook-page { position: relative; padding: 34px; border-radius: 3px 11px 11px 3px; background: radial-gradient(ellipse at 100% 0, #e3d7ef, transparent 65%), #faf5ee; box-shadow: 0 4px 0 -1px #cebbcb, 0 8px 0 -3px #af96b0; }
.notebook-page::before { content: ''; display: block; height: 2px; width: 56px; background: linear-gradient(90deg, #9b78b0, #7b92c2); margin-bottom: 25px; }
.notebook-emblem { float: right; display: grid; place-items: center; margin: 0 0 15px 18px; width: 72px; height: 72px; border-radius: 50%; color: #70507e; background: linear-gradient(140deg, #f7f1fb, #d9c9e4); box-shadow: inset 0 1px 0 #fff, inset 0 -2px 2px #a78bb42e, 0 7px 15px #6e4d721a; font-size: 2rem; }
.notebook-page strong { font-size: clamp(1.35rem, 2.2vw, 1.9rem); max-width: 24ch; }
.notebook-page p { max-width: 65ch; line-height: 1.75; }
.notebook-page .notebook-date, .notebook-page .notebook-place { color: #705773; }
.notebook-certifications { clear: both; gap: 0; }
.notebook-certifications li { display: flex; align-items: start; gap: 12px; padding: 13px 0; border-color: #977ca927; color: #4c3959; }
.notebook-certifications li > i { flex-shrink: 0; color: #7b5895; font-size: 1.2rem; line-height: 1.3; }
.notebook-signature { margin-top: 23px; }

/* Languages read as a live conversation, with the documented levels intact. */
.studio-conversation { overflow: hidden; padding: 32px; border-radius: 16px 16px 16px 4px; color: #f3edff; background: radial-gradient(ellipse at 100% 0, #7260ba52, transparent 70%), linear-gradient(130deg, #353357, #212b48); box-shadow: inset 0 1px 0 #e2ccff38, 0 18px 32px #09071b4d; }
.conversation-emblem { position: absolute; top: 22px; right: 24px; font-size: 5rem; color: #d8c5ff19; pointer-events: none; }
.conversation-greeting { position: relative; width: fit-content; max-width: 100%; color: #e8ddff; font-size: clamp(3.2rem, 6vw, 4.8rem); padding-right: 28px; }
.studio-conversation > p { position: relative; color: #d3d4ed; }
.conversation-wave { gap: 6px; margin: 25px 0; }
.conversation-wave i { width: 5px; background: linear-gradient(#c0a5ff, #72c5ef); }
.conversation-proficiency { color: #e3d9ff; font-variant-numeric: tabular-nums; }
.conversation-level { color: #d5d2ec; }
.conversation-progress { height: 7px; background: #0f1c373d; }
.conversation-progress span { background: linear-gradient(90deg, #bc9cff, #8acef3); box-shadow: inset 0 1px 0 #ffffff4d; }
.conversation-details { gap: 22px; margin-top: 25px; }
.conversation-details > div { padding-top: 16px; border-top: 1px solid #c5b7eb2c; }
.conversation-details dt { color: #bfc4e2; margin-bottom: 7px; }
.conversation-details dd { color: #f1edff; font-size: .95rem; }

/* Contact: correspondence and fields share the same restrained luminous edge. */
.chapter-contact { --studio-accent: #a2ddd6; --studio-companion: #b1b7f4; }
.chapter-contact .studio-draft { padding-block: 15px 0; }
.chapter-contact .draft-envelope { filter: drop-shadow(0 15px 19px #041a164d); }
.chapter-contact .draft-letter { background: linear-gradient(150deg, #fbf8ee, #e3e5f4); box-shadow: 0 3px 15px #11172b1a; }
.chapter-contact .draft-checks { gap: 10px; }
.chapter-contact .draft-checks > span { padding: 7px 12px; border: 1px solid #95c6c044; border-radius: 8px; background: #a1d1c809; color: #c2ded9; }
.chapter-contact .draft-checks > span[data-filled="true"] { color: #173e38; background: #b6e1d7; }
.chapter-scene .chapter-compose { margin-top: 10px; padding: 10px 17px; text-decoration: none; border-radius: 10px; background: linear-gradient(120deg, #c2e8df, #adbdec); color: #192d3d; font-weight: 650; box-shadow: 0 7px 20px #0715143d; }
html #contact .card { border: 0; position: relative; background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--primary-color) 9%, transparent), transparent 65%), var(--bg-card); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary-color) 30%, transparent), 0 14px 32px var(--shadow-md); }
html #contact .card h3 { padding-bottom: 20px; border-bottom: 1px solid var(--border-primary); }
html #contact .floating-field { border-radius: 12px; }
html #contact .floating-field:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 12%, transparent); }
html #about .studio-about-details .card-hover { border: 0; border-radius: 14px; background: linear-gradient(140deg, color-mix(in srgb, var(--primary-color) 12%, var(--bg-card)), var(--bg-card)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--primary-color) 25%, transparent), 0 10px 22px var(--shadow-sm); }

/* Project covers become a compact film library inside the existing laptop. */
html:not([data-experience="classic"]) .project-launcher { background: radial-gradient(ellipse at 0 0, #29264a, transparent 80%), #111b2d; }
html:not([data-experience="classic"]) .launcher-instruction { color: #c6cbe9; margin-bottom: 17px; }
.project-launcher-grid button { background: #222c45; border-radius: 12px; color: #eef1ff; box-shadow: inset 0 1px 0 #dfd4ff24, 0 7px 15px #080c2333; transition: translate 230ms ease-out, background-color 180ms; }
.project-launcher-grid img { height: 85px; transition: transform 350ms cubic-bezier(.2,.8,.2,1); }
.project-launcher-grid button > span:not(.launcher-arrow) { position: relative; padding: 12px 30px 13px 12px; color: #eef1ff; }
.launcher-arrow { width: 21px; height: 21px; display: grid; place-items: center; bottom: 12px; right: 7px; border-radius: 50%; color: #c7b5ff; background: #bca0ff1c; }
.project-launcher-grid button:hover { background: #343859; }
html:not([data-experience="classic"]) .project-story-side li { padding: 5px 10px; border-radius: 7px; background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-primary)); color: var(--primary-color); }
.scene-controls button { background: linear-gradient(120deg, #b1a4e71a, #85a7e709); border-color: #b3a4da55; border-radius: 10px; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .chapter-choices button:hover { translate: 0 -2px; border-color: var(--studio-accent); box-shadow: 0 6px 14px #00000026; }
    .workbench-tool:hover .tool-symbol { rotate: 0deg; }
    .workbench-tool:hover::after { animation: studio-glint 650ms ease-out both; }
    .project-launcher-grid button:hover { translate: 0 -3px; }
    .project-launcher-grid button:hover img { transform: scale(1.035); }
}
@keyframes studio-glint { 0% { transform: translateX(-45%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(45%); opacity: 0; } }
@media (max-width: 759px) {
    .chapter-scene .chapter-instruction { margin-bottom: 23px; }
    .chapter-choices { gap: 8px; margin-bottom: 25px; }
    .chapter-choices button, .chapter-experience .chapter-choices button { padding: 10px 12px; gap: 7px; font-size: .8rem; }
    .chapter-experience .career-window { padding: 22px 18px; }
    .career-company-mark { width: 58px; height: 58px; padding: 6px; margin-left: 12px; }
    .career-window .career-date { font-size: .73rem; }
    .notebook-page { padding: 24px 20px; }
    .notebook-emblem { width: 52px; height: 52px; font-size: 1.55rem; }
    .studio-conversation { padding: 25px 21px; }
    .conversation-emblem { right: 18px; top: 20px; font-size: 3.5rem; }
    .conversation-greeting { font-size: clamp(2.65rem, 10vw, 3.8rem); }
    .conversation-details { gap: 14px; }
    .chapter-contact .draft-checks { flex-wrap: wrap; }
    .project-launcher-grid img { height: 63px; }
    .project-launcher-grid button > span:not(.launcher-arrow) { font-size: .7rem; padding: 9px 24px 10px 10px; }
    .launcher-arrow { width: 17px; height: 17px; right: 5px; bottom: 9px; }
}
@container (max-width: 500px) {
    .chapter-skills .chapter-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chapter-skills .chapter-choices button { gap: 6px; padding: 10px 8px; font-size: .76rem; }
    .tool-traces { display: none; }
    .studio-workbench { grid-template-columns: 1fr; gap: 13px; min-height: 0; padding: 0; }
    .workbench-tool { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 98px; padding: 18px 24px 18px 19px; gap: 20px; font-size: 1.02rem; overflow: visible; }
    .workbench-tool::after { display: none; }
    .tool-symbol { width: 51px; height: 51px; border-radius: 15px; }
    .tool-symbol > i.bi { font-size: 25px; }
    .workbench-tool > i.tool-port { left: auto; right: 13px; top: calc(50% - 10px); height: 20px; width: 2px; }
    .workbench-beam { top: 0; bottom: 0; left: 44px; width: 1px; height: 100%; background: linear-gradient(transparent, var(--studio-accent), transparent); }
    .workbench-beam span { display: none; }
    .chapter-skill-list { margin-top: 23px; gap: 8px; }
    .studio-orbit { grid-template-columns: 1fr minmax(110px, 1.6fr) 1fr; gap: 7px; }
    .orbit-core { max-width: 165px; padding: 14px 8px; gap: 12px; font-size: 1.1rem; }
    .orbit-core > i { font-size: 2rem; }
    .orbit-input, .orbit-output { font-size: .72rem; gap: 10px; }
    .orbit-input > i, .orbit-output > i { width: 34px; height: 34px; font-size: 1rem; }
    .studio-orbit .orbit-geometry { top: 10px; height: 160px; }
    .studio-orbit p { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .chapter-scene *, .chapter-scene *::after, .project-launcher-grid button, .project-launcher-grid img { animation: none !important; transition: none !important; }
}
@media print { html #contact .card, html #about .card-hover { box-shadow: none; background: white; } }

/* Shared selection follows the chosen control; no outline around its container. */
.chapter-choices { position: relative; isolation: isolate; }
.chapter-selection { display: none; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 12px; background: linear-gradient(115deg, var(--studio-accent), var(--studio-companion)); box-shadow: 0 5px 13px var(--surface-shadow), inset 0 1px 0 var(--surface-highlight); }
.chapter-choices[data-selection-ready="true"] > .chapter-selection { display: block; }
html .chapter-choices[data-selection-ready="true"] button { z-index: 1; background: transparent; }
html .chapter-choices[data-selection-ready="true"] button[aria-pressed="true"] { box-shadow: none; }
@media (hover: hover) {
    html .chapter-choices[data-selection-ready="true"] button:hover { translate: none; box-shadow: none; }
}