/* generated by opener-mocks-2026-10-06/c9-desk/export.py from c6-desk/index.html; scoped to #top.desk-opener */
#top.desk-opener{--bg:#f4f0e6;--ink:#293b30;--muted:#5d6b5f;--line:#68796240;
  --top:#faf7ef;--side-r:#e9e3d4;--side-l:#ded7c5;--hole:#e4ddcc;--screen:#fbfaf6;--side-app:#efeadf;
  --stroke:#2c3d32;--ptc-body:#1c201d;--paper-glass:#fbfaf6;
  --acc-jd:#e07a3a;--acc-ur:#26494c;--acc-eb:#2f5be0;--acc-pw:#4f9a3b;--acc-me:#b4553a;
  --on-black:#aab3ab;--on-blue:#14245e;--glow:#ffd45c;--glow2:#ffa58c;--glow3:#f0607a;--paper:#fffdf7;--paper-r:#ece6d6;--paper-l:#e2dbc8;--cover:#26494c;--ink-pen:#3b4a6b;}
html[data-theme=dark] #top.desk-opener{--bg:#17201b;--ink:#e6ecdf;--muted:#a9b8a5;--line:#b1c1a033;
  --top:#24302a;--side-r:#1c2621;--side-l:#151d19;--hole:#1a231e;--screen:#eef0ea;--side-app:#e2e5dd;
  --stroke:#d3dccb;--ptc-body:#0c0f0d;--paper-glass:#24302a;
  --acc-jd:#f0945a;--acc-ur:#2f6a6e;--acc-eb:#6b8cff;--acc-pw:#7cc266;--acc-me:#e08a6a;
  --on-black:#8e988f;--on-blue:#c9d5ff;--glow:#ffd96e;--glow2:#ff9f86;--glow3:#e8587a;--paper:#e9ece3;--paper-r:#c9cec2;--paper-l:#b8beb1;--cover:#2f6a6e;--ink-pen:#4b5d86;}
#top.desk-opener .do-hero{position:relative;height:clamp(640px,100vh,1000px);max-width:none;margin:0;overflow:hidden}
#top.desk-opener .do-ident{position:absolute;left:76px;bottom:76px;z-index:2;max-width:340px}
#top.desk-opener .do-ident h1{margin:0;font-weight:400;letter-spacing:-.035em;line-height:1.1}
#top.desk-opener .do-ident .name{display:block;font-size:22px;color:var(--muted);letter-spacing:-.01em;margin-bottom:6px}
#top.desk-opener .do-ident .role{display:block;font-size:clamp(40px,4vw,54px)}
#top.desk-opener .do-ident .deck{font-size:15px;line-height:1.75;margin:22px 0 0;max-width:30ch}
#top.desk-opener .do-ident .disc{margin:20px 0 0;padding:0;list-style:none;font-size:11.5px;line-height:1.9;color:var(--muted)}
#top.desk-opener .do-ident .hint{margin-top:22px;font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center}
#top.desk-opener .do-ident .hint::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
#top.desk-opener .do-scene{position:absolute;inset:0}
#top.desk-opener .desk-frame{position:absolute;inset:0}
#top.desk-opener .desk-stage{position:absolute;inset:24px 32px 0 0}
#top.desk-opener .desk-stage svg{display:block;width:100%;height:100%;overflow:visible}
#top.desk-opener svg [class]{vector-effect:non-scaling-stroke}
#top.desk-opener .world path,#top.desk-opener .world rect,#top.desk-opener .world circle,#top.desk-opener .world ellipse{stroke:var(--stroke);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
#top.desk-opener .ft{fill:var(--top)}
#top.desk-opener .fr{fill:var(--side-r)}
#top.desk-opener .fl{fill:var(--side-l)}
#top.desk-opener .fs{fill:var(--side-r)}
#top.desk-opener .fk{fill:var(--hole);stroke-opacity:.7}
#top.desk-opener .fk.soft{fill:none;stroke-opacity:.35}
#top.desk-opener .ln{fill:none}
#top.desk-opener .ln-r{fill:none;stroke-opacity:.6}
#top.desk-opener .thin{stroke-opacity:.6}
#top.desk-opener .faint{stroke-opacity:.42}
#top.desk-opener .desk .ft{fill:var(--top)}
#top.desk-opener .legs path{stroke-opacity:.8}
#top.desk-opener .key{fill:var(--top);stroke-opacity:.75;stroke-width:.9}
#top.desk-opener .acc-key{fill:var(--acc-jd);stroke:var(--acc-jd)!important;fill-opacity:.85}
#top.desk-opener .acc-ln{fill:none;stroke:var(--acc-jd)!important;stroke-width:1.6!important}
#top.desk-opener .acc-fill{fill:var(--acc-jd);stroke:none!important}
#top.desk-opener .glow{stroke-opacity:.9}
#top.desk-opener .ph-body .fs{fill:var(--ptc-body)}
#top.desk-opener .ph-body .ph-top{fill:var(--ptc-body)}
#top.desk-opener .ph-screen{fill:#f2f2ee;stroke:none!important}
#top.desk-opener .ph rect[fill]{stroke:none!important}
#top.desk-opener .pill{fill:#2b302d;fill-opacity:.08;stroke:none!important}
#top.desk-opener .plate-edge{fill:none;stroke-width:1.1}
#top.desk-opener .pl-dark{fill:#121519;stroke:var(--stroke)}
#top.desk-opener .pl-light{fill:#f5f1ea}
#top.desk-opener .pl-glass{fill:var(--paper-glass);fill-opacity:.22}
#top.desk-opener .pl-dark~path,#top.desk-opener .pl-dark~circle,#top.desk-opener .pl-dark~rect{stroke:none!important}
#top.desk-opener .pl-light~rect,#top.desk-opener .pl-light~circle,#top.desk-opener .pl-light~path[stroke]{stroke-width:1!important}
#top.desk-opener .pl-light~path[stroke="#2b2620"]{stroke:#2b2620!important}
#top.desk-opener .dk{stroke:#2b2620!important}
#top.desk-opener .dots{fill:none;stroke-dasharray:1.5 5;stroke-opacity:.75}
#top.desk-opener .ph-glow{fill:url(#dk-angel);stroke:none!important;transition:opacity .25s}
#top.desk-opener .rise .layer,#top.desk-opener .dotsg{transition:transform .2s ease-out,opacity .2s ease-out}
#top.desk-opener .obj.on .rise .layer,#top.desk-opener .obj.on .dotsg{transition-duration:.12s}
#top.desk-opener .rise .layer{opacity:0}
#top.desk-opener .dotsg{opacity:0}
#top.desk-opener .rise .l3{transform:translateY(34px)}
#top.desk-opener .rise .l2{transform:translateY(60px)}
#top.desk-opener .rise .l1{transform:translateY(86px)}
#top.desk-opener .obj.on .rise .layer{opacity:1;transform:none}
#top.desk-opener .obj.on .dotsg{opacity:1}
#top.desk-opener .ph-shadow{fill:#2b3a30;fill-opacity:.07;stroke:none!important;filter:url(#dk-soft)}
html[data-theme=dark] #top.desk-opener .ph-shadow{fill:#000;fill-opacity:.25}
#top.desk-opener .scr-shadow{fill:#2b3a30;fill-opacity:.07;stroke:none!important}
html[data-theme=dark] #top.desk-opener .scr-shadow{fill:#000;fill-opacity:.16}
#top.desk-opener .scr-frame{fill:#262b28;stroke:var(--stroke)!important;stroke-width:.8!important}
html[data-theme=dark] #top.desk-opener .scr-frame{fill:#0d100e}
#top.desk-opener .scr-img{image-rendering:auto}
#top.desk-opener .scr-edge{fill:none;stroke:#000!important;stroke-opacity:.35!important;stroke-width:.6!important}
#top.desk-opener .obj.scr{pointer-events:none}
#top.desk-opener .obj.scr>g.screen{opacity:0!important;transition:opacity .2s ease-out}
#top.desk-opener .obj.scr>g.screen>.scr-win{transform:translateY(8px);transition:transform .2s ease-out}
#top.desk-opener .obj.scr.on>g.screen{transition-duration:.12s}
#top.desk-opener .obj.scr.on>g.screen>.scr-win{transform:none;transition:transform .15s cubic-bezier(.2,.8,.3,1)}
#top.desk-opener .obj.scr.on{pointer-events:auto}
#top.desk-opener .obj.scr.on>g.screen{opacity:1!important;transform:none}
#top.desk-opener .tail .cl{stroke-opacity:.55}
#top.desk-opener .tail .cl.out{stroke-opacity:.75}
#top.desk-opener .tail image{opacity:1}
#top.desk-opener .world .fog{stroke:none!important;pointer-events:none}
#top.desk-opener .ph-heart{fill:#9a9d97;stroke:none!important;font:700 4.4px Duo,ui-monospace,Menlo,monospace;letter-spacing:-.02em}
#top.desk-opener .tail .lead image{opacity:1}
#top.desk-opener .tail .lead .cl{stroke-opacity:.8}
#top.desk-opener .tail .lead .cl.out{stroke-opacity:1;stroke-width:1.7}
#top.desk-opener #dk-lift feDropShadow{flood-color:#2b3a30;flood-opacity:.38}
html[data-theme=dark] #top.desk-opener #dk-lift feDropShadow{flood-color:#000;flood-opacity:.6}
#top.desk-opener .mat .ft{fill:color-mix(in srgb,var(--top) 93%,#5e635e)}
#top.desk-opener .mat .fr,#top.desk-opener .mat .fl{fill:color-mix(in srgb,var(--side-r) 88%,#5e635e)}
#top.desk-opener .mat path{stroke-opacity:.45}
#top.desk-opener .world .cl.blueflr{stroke:var(--on-blue);stroke-opacity:.45}
#top.desk-opener .tail-item{transition:transform .18s ease}
#top.desk-opener .desk-stage[data-active=past-work] .tail-item{animation:hop2 .45s ease-out}
#top.desk-opener .nb-cover .ft,#top.desk-opener .nb-cover .fr,#top.desk-opener .nb-cover .fl{fill:var(--cover)}
#top.desk-opener .nb-cover .fl{fill:color-mix(in srgb,var(--cover) 80%,#000)}
#top.desk-opener .nb-page .ft{fill:var(--paper)}
#top.desk-opener .nb-page .fr{fill:var(--paper-r)}
#top.desk-opener .nb-page .fl{fill:var(--paper-l)}
#top.desk-opener .rule{stroke:#5b7fa6!important;stroke-opacity:.28!important;stroke-width:.8!important}
#top.desk-opener .ink{stroke:var(--ink-pen)!important;stroke-width:.75!important;stroke-opacity:.55}
#top.desk-opener .writing{stroke-dasharray:1 1;stroke-dashoffset:0}
#top.desk-opener .title{stroke-width:1.2!important;stroke-opacity:.75}
#top.desk-opener .spine{stroke-opacity:.5!important}
#top.desk-opener .nb-ribbon{fill:#c4553a;stroke:#8f3a25!important;stroke-width:.8!important}
#top.desk-opener .pc-body .ft{fill:#f2c14e}
#top.desk-opener .pc-body .fr{fill:#e0a935}
#top.desk-opener .pc-body .fl{fill:#c99528}
#top.desk-opener .pc-tip{fill:#e9d2ae}
#top.desk-opener .pc-eraser .ft,#top.desk-opener .pc-eraser .fr,#top.desk-opener .pc-eraser .fl{fill:#e8918a}
#top.desk-opener .cad image{pointer-events:auto}
#top.desk-opener .cad .th-d{display:none}
html[data-theme=dark] #top.desk-opener .cad .th-l{display:none}
html[data-theme=dark] #top.desk-opener .cad .th-d{display:inline}
#top.desk-opener .world .cl{fill:none;stroke:var(--stroke);stroke-linejoin:round;stroke-linecap:round}
#top.desk-opener .world .cl.out{stroke-width:1.15}
#top.desk-opener .world .cl.sil{stroke-width:.9;stroke-opacity:.9}
#top.desk-opener .world .cl.crease{stroke-width:.75;stroke-opacity:.7}
#top.desk-opener .world .cl.blue:not(.out),#top.desk-opener .world .cl.bluein:not(.out){stroke:var(--on-blue)}
#top.desk-opener .world .cl.blue.crease,#top.desk-opener .world .cl.bluein.crease{stroke-opacity:.6}
#top.desk-opener .world .cl.black:not(.out),#top.desk-opener .world .cl.cushion:not(.out),#top.desk-opener .world .cl.fabric:not(.out),#top.desk-opener .world .cl.dark:not(.out){stroke:var(--on-black);stroke-opacity:.72}
#top.desk-opener .world .cl.black.crease,#top.desk-opener .world .cl.cushion.crease,#top.desk-opener .world .cl.dark.crease{stroke-opacity:.5}
#top.desk-opener .world .cl.accent{stroke:var(--acc-jd)!important;stroke-opacity:1;stroke-width:1.2}
#top.desk-opener .world .cl.logo{stroke:var(--on-black)}
#top.desk-opener .tr-base .ft{fill:color-mix(in srgb,var(--top) 88%,#b08a5a)}
#top.desk-opener .tr-base .fr,#top.desk-opener .tr-rim .fr{fill:color-mix(in srgb,var(--side-r) 85%,#b08a5a)}
#top.desk-opener .tr-base .fl,#top.desk-opener .tr-rim .fl{fill:color-mix(in srgb,var(--side-l) 85%,#b08a5a)}
#top.desk-opener .tr-rim .ft{fill:color-mix(in srgb,var(--top) 80%,#b08a5a)}
#top.desk-opener .tiny path,#top.desk-opener .tiny circle{stroke-width:.9!important}
#top.desk-opener .pp-ch .fs{fill:#2d322e}
#top.desk-opener .pp-ch .ft{fill:#454b46}
#top.desk-opener .pp-mid .ft{fill:#f2c230}
#top.desk-opener .pp-mid .fr{fill:#d9a81c}
#top.desk-opener .pp-mid .fl{fill:#bf9215}
#top.desk-opener .pp-pipe .fs,#top.desk-opener .pp-pipe .ft{fill:#3a3f3b}
#top.desk-opener .pp-foot .ft,#top.desk-opener .pp-foot .fr,#top.desk-opener .pp-foot .fl{fill:#2d322e}
html[data-theme=dark] #top.desk-opener .pp-ch .fs,html[data-theme=dark] #top.desk-opener .pp-pipe .fs{fill:#0f1311}
#top.desk-opener .ab-face{fill:#fbfaf6}
#top.desk-opener .ab-back{fill:#e4e0d4}
#top.desk-opener .ab-slot{stroke-opacity:.6!important}
#top.desk-opener .antbug circle{fill:#2b2620;stroke:none!important}
html[data-theme=dark] #top.desk-opener .antbug circle{fill:#e6ecdf}
#top.desk-opener .ct-tile .ft{fill:#4a6fd8}
#top.desk-opener .ct-tile .fr{fill:#3758bd}
#top.desk-opener .ct-tile .fl{fill:#2c49a3}
#top.desk-opener .ct-grid{stroke:#c9d6ff!important;stroke-opacity:.55!important;stroke-width:.6!important}
#top.desk-opener .tote .ft{fill:color-mix(in srgb,var(--acc-pw) 45%,var(--top))}
#top.desk-opener .tote .fr{fill:color-mix(in srgb,var(--acc-pw) 70%,var(--top))}
#top.desk-opener .tote .fl{fill:color-mix(in srgb,var(--acc-pw) 85%,#203020)}
#top.desk-opener .handle .ft{fill:#59625a}
#top.desk-opener .handle .fr{fill:#454d46}
#top.desk-opener .handle .fl{fill:#363d37}
#top.desk-opener .acc-fill.btn{fill:#e6b422;stroke:none!important}
#top.desk-opener .fig{fill:none;stroke-dasharray:2.6 2.2;stroke-width:1.2!important}
#top.desk-opener .fig.torso,#top.desk-opener .fig.head,#top.desk-opener .fig.hand{fill:var(--top)}
#top.desk-opener .me .ft{fill:var(--top)}
#top.desk-opener .obj{cursor:pointer;outline:none}
#top.desk-opener .obj>g,#top.desk-opener .table{transition:opacity .2s ease-out,transform .2s ease-out}
#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .obj>g,#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .table{transition-duration:.12s;transition-timing-function:ease-out,cubic-bezier(.2,.8,.3,1.2)}
#top.desk-opener .desk-stage[data-active]:not([data-active=""]):not([data-active=past-work]) .t-back{opacity:.45}
#top.desk-opener .desk-stage[data-active=past-work] .t-front{opacity:.45}
#top.desk-opener .tag{transition:opacity .2s ease-out}
#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .tag:not(.on){opacity:0;pointer-events:none;transition-duration:.12s}
#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .obj:not(.on)>g{opacity:.38}
#top.desk-opener .obj.on>g{transform:translateY(-3px)}
#top.desk-opener .obj:focus-visible>g{filter:drop-shadow(0 0 0 var(--acc-jd))}
#top.desk-opener .ph-glow{opacity:0}
#top.desk-opener .obj.on .ph-glow{opacity:1}
#top.desk-opener .obj.on .waves{animation:shimmer 1.2s ease-in-out 1}
@keyframes shimmer{#top.desk-opener 50%{transform:translateX(2px)}}
#top.desk-opener .obj.on .writing{animation:write 1.4s ease-out both}
@keyframes write{#top.desk-opener 0%{stroke-dashoffset:1}
#top.desk-opener 100%{stroke-dashoffset:0}}
#top.desk-opener .pencil{transition:transform .18s ease}
#top.desk-opener .obj.on .pencil{transform:translate(-3px,-2px)}
#top.desk-opener .cad.buds{transition:transform .18s ease}
#top.desk-opener .obj.on .cad.buds{animation:hop .55s ease-out}
@keyframes hop{#top.desk-opener 40%{transform:translateY(-7px)}}
#top.desk-opener .obj.on .cad.lid{animation:lid .55s ease-out}
@keyframes lid{#top.desk-opener 40%{transform:translateY(-2.5px)}}
#top.desk-opener .obj.on .cad.hs{animation:bob .6s ease-in-out}
@keyframes bob{#top.desk-opener 40%{transform:translateY(-2px)}}
#top.desk-opener .obj.on .cad.ms{animation:wiggle .6s ease-in-out}
@keyframes wiggle{#top.desk-opener 30%{transform:translate(2px,1px)}
#top.desk-opener 60%{transform:translate(-1.5px,-1px)}}
#top.desk-opener .obj.on .cad.kbd{animation:press .5s ease-in-out}
@keyframes press{#top.desk-opener 40%{transform:translateY(1px)}}
#top.desk-opener .obj.on .cl.accent{animation:rgb 1.6s linear 1}
@keyframes rgb{#top.desk-opener 0%{stroke:#e07a3a}
#top.desk-opener 33%{stroke:#d04f9a}
#top.desk-opener 66%{stroke:#4f7be0}
#top.desk-opener 100%{stroke:#e07a3a}}
#top.desk-opener .tiny{transition:transform .18s}
#top.desk-opener .obj.on .t1{animation:hop2 .45s ease-out}
#top.desk-opener .obj.on .t2{animation:hop2 .45s .08s ease-out}
#top.desk-opener .obj.on .t3{animation:hop2 .45s .16s ease-out}
#top.desk-opener .obj.on .t4{animation:hop2 .45s .24s ease-out}
@keyframes hop2{#top.desk-opener 40%{transform:translateY(-4px)}}
#top.desk-opener .obj.on .antbug{animation:scurry .9s ease-in-out}
@keyframes scurry{#top.desk-opener 50%{transform:translate(-5px,-2px)}}
#top.desk-opener .wave-arm{transform-box:fill-box;transform-origin:0% 100%}
#top.desk-opener .obj.on .wave-arm{animation:wave .7s ease-in-out 2}
@keyframes wave{#top.desk-opener 25%{transform:rotate(14deg)}
#top.desk-opener 75%{transform:rotate(-10deg)}}
#top.desk-opener .tags{position:absolute;inset:0;pointer-events:none}
#top.desk-opener .tag{position:absolute;display:flex;align-items:center;gap:6px;transform:translate(-4px,-50%);pointer-events:auto;text-decoration:none;font-size:11px;white-space:nowrap;color:var(--ink)}
#top.desk-opener .tag .dot{width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid var(--ink);flex:none}
#top.desk-opener .tag .num{background:var(--bg);padding:1px 4px;border-radius:3px;opacity:.85}
#top.desk-opener .tag .txt{display:grid;gap:2px;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 10px 8px;pointer-events:none}
#top.desk-opener .tag .txt b{font-weight:400;font-size:12.5px}
#top.desk-opener .tag .txt i{font-style:normal;color:var(--muted);font-size:10.5px;white-space:normal;width:max-content;max-width:26ch;line-height:1.45}
#top.desk-opener .tag.on .txt{opacity:1;transform:none}
#top.desk-opener .tag.on .dot{background:var(--ink)}
#top.desk-opener .tag.plain .dot{border-style:dashed}
#top.desk-opener .tag.plain:not(.on) .dot{opacity:.55}
#top.desk-opener .tag.flip{flex-direction:row-reverse;transform:translate(calc(-100% + 4px),-50%)}
#top.desk-opener .tag.flip .txt{transform:translateX(4px)}
#top.desk-opener .tag.flip.on .txt{transform:none}
#top.desk-opener .tag.up .txt{position:absolute;left:-2px;bottom:calc(100% + 8px);transform:translateY(4px)}
#top.desk-opener .tag.up.on .txt{transform:none}
#top.desk-opener .tag.down .txt{position:absolute;left:-2px;top:calc(100% + 8px);transform:translateY(-4px)}
#top.desk-opener .tag.down.on .txt{transform:none}
@media (max-width:980px){#top.desk-opener .do-hero{height:auto;overflow:visible;padding:64px 0 0}
#top.desk-opener .do-ident{position:static;padding:0 20px;max-width:none}
#top.desk-opener .do-scene{position:relative;inset:auto;margin-top:18px}
#top.desk-opener .desk-frame{position:relative;inset:auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#top.desk-opener .desk-frame::-webkit-scrollbar{display:none}
#top.desk-opener .desk-stage{position:relative;inset:auto;width:max(100%,980px);height:560px}
#top.desk-opener .swipe{display:block!important;padding:0 20px}
#top.desk-opener .tag .txt{display:none}}
@media (max-width:640px){#top.desk-opener .do-hero{padding-top:56px}
#top.desk-opener .do-ident{padding:0 16px}
#top.desk-opener .do-ident .role{font-size:42px}
#top.desk-opener .do-ident .deck{font-size:14px;margin-top:16px}
#top.desk-opener .do-ident .disc{display:flex;flex-wrap:wrap;gap:0 14px;margin-top:14px}
#top.desk-opener .desk-stage{width:900px;height:390px}}
#top.desk-opener .swipe{display:none;font-size:10.5px;color:var(--muted);margin:2px 0 0;text-align:right}
#top.desk-opener .desk-stage[data-mode=layered] svg[data-desk]{position:relative;z-index:1}
#top.desk-opener .desk-stage[data-mode=layered] .tags{z-index:2}
#top.desk-opener .pieces{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;pointer-events:none;z-index:0}
#top.desk-opener .pieces .table{position:absolute;left:0;top:0;width:0;height:0;will-change:opacity}
#top.desk-opener .pc{position:absolute;will-change:transform,opacity;transition:opacity .2s ease-out,transform .2s ease-out}
#top.desk-opener .pc>.pa{width:100%;height:100%;transition:transform .2s ease-out}
#top.desk-opener .pc img{display:block;width:100%;height:100%;user-select:none}
#top.desk-opener .pc .th-d{display:none}
html[data-theme=dark] #top.desk-opener .pc .th-l{display:none}
html[data-theme=dark] #top.desk-opener .pc .th-d{display:block}
#top.desk-opener .pieces svg{display:block;width:100%;height:100%;overflow:visible}
#top.desk-opener .pieces .ph-glow{opacity:1}
#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .pc{transition-duration:.12s;transition-timing-function:ease-out,cubic-bezier(.2,.8,.3,1.2)}
#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .pc[data-obj]:not(.on){opacity:.38}
#top.desk-opener .pc.on:not(.screen):not(.glow){transform:translateY(-3px)}
#top.desk-opener .pc.screen,#top.desk-opener .pc.glow,#top.desk-opener .pc.layer{opacity:0}
#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .pc.screen:not(.on),#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .pc.glow:not(.on),#top.desk-opener .desk-stage[data-active]:not([data-active=""]) .pc.layer:not(.on){opacity:0}
#top.desk-opener .pc.screen.on,#top.desk-opener .pc.glow.on,#top.desk-opener .pc.layer.on{opacity:1}
#top.desk-opener .pc.screen.win>.pa{transform:translateY(8px)}
#top.desk-opener .pc.l3>.pa{transform:translateY(34px)}
#top.desk-opener .pc.l2>.pa{transform:translateY(60px)}
#top.desk-opener .pc.l1>.pa{transform:translateY(86px)}
#top.desk-opener .pc.on>.pa{transform:none;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,.8,.3,1)}
#top.desk-opener .pc.on.buds>.pa{animation:hop .55s ease-out}
#top.desk-opener .pc.on.lid>.pa{animation:lid .55s ease-out}
#top.desk-opener .pc.on.hs>.pa{animation:bob .6s ease-in-out}
#top.desk-opener .pc.on.ms>.pa{animation:wiggle .6s ease-in-out}
#top.desk-opener .pc.on.kbd>.pa{animation:press .5s ease-in-out}
#top.desk-opener .pc.on .cl.accent{animation:rgb 1.6s linear 1}
#top.desk-opener .desk-stage[data-active=past-work] .pc.tail-item>.pa{animation:hop2 .45s ease-out}
#top.desk-opener .pc.on .writing{animation:write 1.4s ease-out both}
#top.desk-opener .pc.on .pencil{transform:translate(-3px,-2px)}
#top.desk-opener .pc.on .waves{animation:shimmer 1.2s ease-in-out 1}
#top.desk-opener .hits *{fill:transparent;stroke:none}
#top.desk-opener .hits .glow,#top.desk-opener .hits .dots{display:none}
#top.desk-opener .hits .screen,#top.desk-opener .hits .layer{pointer-events:none}
#top.desk-opener .hits a.on .screen,#top.desk-opener .hits a.on .layer{pointer-events:auto}
/* c10: load-time hello, each object lifts and settles in turn (see scene.js) */
@keyframes deskhello{0%,100%{transform:none}38%{transform:translateY(-6px)}62%{transform:translateY(-4px)}}
#top.desk-opener .desk-stage.hello .pc[data-obj]:not(.screen):not(.glow):not(.layer),#top.desk-opener .desk-stage.hello .obj:not(.scr)>g{animation:deskhello .9s cubic-bezier(.3,.7,.3,1) calc(var(--hello-i,0) * .14s) both}
@media (prefers-reduced-motion:reduce){#top.desk-opener .desk-stage *{animation:none!important}
#top.desk-opener .desk-stage .obj>g,#top.desk-opener .desk-stage .obj.on>g,#top.desk-opener .desk-stage .obj.scr>g.screen,#top.desk-opener .desk-stage .obj.scr.on>g.screen{transform:none!important;transition-property:opacity!important}
#top.desk-opener .desk-stage .rise .layer,#top.desk-opener .desk-stage .scr-win,#top.desk-opener .desk-stage .pc,#top.desk-opener .desk-stage .pc>.pa{transform:none!important}
#top.desk-opener .desk-stage .pc{transition-property:opacity!important}}

/* ---------- page-only: the section, its colours on the page's surface, the prose + base row under the desk ---------- */
#top.desk-opener{position:relative;max-width:none;margin:0;padding:0;display:block;min-height:0;--bg:var(--opening-surface,#f4f0e6);background:var(--bg);color:var(--ink)}
html[data-theme=dark] #top.desk-opener{--bg:var(--opening-surface,#252d24);--top:#2f3b34;--side-r:#222c26;--side-l:#1b231f;--hole:#222b25;--paper-glass:#2f3b34}
#top.desk-opener .do-hero{max-width:none}
#top.desk-opener .do-ident h1{font-size:inherit;letter-spacing:normal}
#top.desk-opener .do-ident h1 .name{font-size:22px}
#top.desk-opener .do-ident h1 .role{font-size:clamp(40px,4vw,54px)}
#top.desk-opener .do-ident p{max-width:none}
#top.desk-opener .do-ident .deck{max-width:30ch}
#top.desk-opener .do-ident .disc span{display:block}
#top.desk-opener .desk-stage a:hover{text-decoration:none}
#top.desk-opener .desk-stage a:focus-visible{outline:none}
#top.desk-opener .desk-stage .obj:focus-visible>g{filter:drop-shadow(0 0 1.5px var(--acc-jd))}
#top.desk-opener .page-controls{top:28px;right:32px}
#top.desk-opener .do-prose{max-width:1440px;margin:0 auto;padding:28px 56px 0;display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);column-gap:40px;font-size:15px;line-height:1.8}
#top.desk-opener .do-prose>p{grid-column:2;max-width:60ch;margin:0 0 22px}
#top.desk-opener .do-prose em{font-style:italic}
#top.desk-opener .do-prose{padding-bottom:40px}   /* c8: more air under the two paragraphs before the base rule */
#top.desk-opener .opening-base{margin:24px 4vw 0;padding:20px 0 22px}
@media (max-width:980px){
  #top.desk-opener .do-prose{grid-template-columns:1fr;padding:22px 20px 0}#top.desk-opener .do-prose>p{grid-column:1}
  #top.desk-opener .opening-base{margin:18px 20px 0}#top.desk-opener .do-prose{padding-bottom:28px}
  #top.desk-opener .page-controls{top:22px;right:20px}
}
@media (max-width:640px){
  #top.desk-opener .page-controls{top:16px;right:16px}
  #top.desk-opener .do-ident .disc span{display:inline}
  #top.desk-opener .do-prose{padding:16px 16px 0;font-size:14px;line-height:1.75}
  #top.desk-opener .opening-base{margin:16px 16px 0}#top.desk-opener .do-prose{padding-bottom:24px}
}

/* ---------- c9: Brian's chosen layout (from preview A) ----------
   First screen = the desk + name / Designer / disciplines / first sentence, set at the BOTTOM-LEFT, the sentence ending
   just above the fold. Paragraphs 2-3 continue in the same column directly below, so they arrive with the first scroll. */
#top.desk-opener .page-controls .appearance-toggle{font-size:10px;padding:8px 12px}   /* = the nav's label size */
#top.desk-opener .do-ident .disc{display:flex;flex-wrap:wrap;gap:0 16px;margin:12px 0 0;font-size:11px;line-height:1.6}
#top.desk-opener .do-ident .disc span{display:inline;white-space:nowrap}
#top.desk-opener .do-ident .deck{margin-top:18px}
@media (min-width:981px){
  #top.desk-opener .do-hero{height:clamp(640px,100svh,1600px)}   /* the hero IS the first screen, so the fold lands under the first sentence */
  #top.desk-opener .do-ident{left:76px;bottom:18px;max-width:440px}
  #top.desk-opener .do-ident .deck{max-width:none;font-size:15px;line-height:1.8}
  #top.desk-opener .do-prose{display:block;max-width:none;margin:0;padding:8px 0 0 76px;font-size:15px;line-height:1.8}
  #top.desk-opener .do-prose>p{max-width:440px;margin:0 0 22px}
  #top.desk-opener .do-prose{padding-bottom:56px}
}
@media (max-width:980px){
  #top.desk-opener .do-hero{display:flex;flex-direction:column;justify-content:space-between;min-height:100svh;padding-bottom:16px}
  #top.desk-opener .do-scene{order:1}
  #top.desk-opener .do-ident{order:2;margin-top:18px}
  #top.desk-opener .do-prose{padding-top:12px}
}
@media (max-width:640px){
  #top.desk-opener .page-controls .appearance-toggle{font-size:10px;padding:7px 10px}
  #top.desk-opener .do-ident .disc{gap:0 12px;font-size:10.5px}
}

/* Oct 9: no circle dots on the number tags; 05 nudged a touch left and down */
#top.desk-opener .tag .dot{display:none}
#top.desk-opener .tag[data-for="past-work"]{margin-left:-3px;margin-top:3px}