@font-face{font-family:NotebookSans;src:url('assets/sans.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:NotebookSans;src:url('assets/sans-bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:NotebookSerif;src:url('assets/headline.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:NotebookNote;src:url('assets/note.otf') format('opentype');font-weight:400;font-display:swap}
:root{--paper:#fff9f3;--ink:#3b3038;--muted:#76646d;--accent:#a23d63;--pink:#f2b9cc;--pink-light:#fbe4eb;--lilac:#d7c6ed;--lilac-light:#eee5f7;--yellow:#ffe6a6;--line:#d9c8c6;--shadow:#e4c1cd;--serif:NotebookSerif,Georgia,serif;--sans:NotebookSans,Arial,sans-serif;--note:NotebookNote,'Comic Sans MS',cursive}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:26px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body[data-theme="lilac"]{--accent:#69478b;--pink:#cfb6e5;--pink-light:#eee2f8;--lilac:#f1bfd1;--lilac-light:#fce7ed;--shadow:#cec0df}
button,a,summary{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button,summary{font:inherit;color:inherit;cursor:pointer}
button{border:0}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
button:hover,a:hover,summary:hover{transition:background .16s ease,color .16s ease,transform .16s ease}
button:disabled{cursor:default}
svg{display:block}
svg:not([viewBox]){overflow:visible}
[hidden]{display:none!important}
::selection{color:var(--ink);background:var(--pink)}
.wrap{width:min(1130px,calc(100% - 80px));margin-inline:auto}
.svg-library,.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:20px;top:-100px;padding:12px 20px;z-index:100;background:var(--ink);color:var(--paper);border-radius:8px}
.skip-link:focus{top:12px}
.header{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:110px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-size:29px;letter-spacing:-1px;line-height:1}
.brand svg{width:31px;height:31px;color:var(--accent);transform:rotate(-14deg)}
.brand-dot{color:var(--accent)}
.header nav{display:flex;align-items:center;gap:32px;font-size:15px}
.header nav a{position:relative;padding-block:10px}
.header nav a::after{content:'';position:absolute;left:0;bottom:7px;height:2px;width:0;background:var(--accent);transition:width .2s}
.header nav a:hover::after{width:100%}
.theme-toggle{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:50px;padding:9px 14px;background:transparent;font-size:13px;white-space:nowrap}
.theme-toggle:hover{background:var(--lilac-light)}
.theme-swatch{width:15px;height:15px;background:var(--lilac);border:1px solid #a997bd;border-radius:50%}
.tiny-label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:1.75px;line-height:1.6}
.handwritten{font-family:var(--note);font-weight:400;font-size:29px;line-height:1.15}
.hero{display:grid;grid-template-columns:.97fr 1.03fr;gap:35px;align-items:center;padding-block:82px 112px}
.hero-label{margin:0 0 24px;color:var(--muted)}
h1,h2,h3,p{margin:0}
h1{position:relative;width:max-content;max-width:100%;font-family:var(--serif);font-size:82px;line-height:1.06;font-weight:700;letter-spacing:-4px}
h1>span{color:var(--accent);font-size:114px;letter-spacing:-6px}
.hero-star{position:absolute;width:31px;height:31px;right:-33px;top:100px;color:var(--pink);transform:rotate(14deg)}
.hero-intro{max-width:365px;margin-top:25px;font-size:19px;line-height:1.6;color:#60525c}
.button{display:inline-flex;align-items:center;gap:20px;padding:14px 21px;background:var(--pink);border:1px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--ink);font-size:15px;font-weight:700;margin-top:27px;transition:transform .2s,box-shadow .2s}
.button svg{width:21px;height:21px}
.button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.hero-bottom{color:var(--muted);font-size:12px;margin-top:30px}
.hero-bottom span{margin:0 8px}
.hero-collage{position:relative;padding:31px 10px 22px;min-width:0}
.collage-caption{position:absolute;top:-13px;left:37px;font-size:27px;transform:rotate(-4deg);color:var(--accent)}
.desktop{position:relative;background:var(--pink-light);border:1.5px solid var(--ink);border-radius:11px;box-shadow:8px 9px 0 var(--lilac);transform:rotate(2deg);overflow:hidden}
.window-bar{height:43px;display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid var(--ink);padding:0 15px;background:var(--pink);font-size:12px}
.window-dots{display:flex;gap:6px}
.window-dots i{width:9px;height:9px;display:block;border:1px solid var(--ink);border-radius:50%;background:#fff9f3}
.bar-flower{width:21px;height:21px;color:var(--accent)}
.desktop-body{background-image:radial-gradient(#d8bdc8 .8px,transparent .8px);background-size:15px 15px;padding:25px 27px 21px}
.screen-scene{height:230px;position:relative;width:100%;max-width:363px;margin:auto}
.monitor{position:absolute;left:10px;top:5px;width:258px;z-index:2;background:#ebded0;border:1.5px solid #62544d;padding:11px 11px 0;border-radius:13px 13px 9px 9px;transform:rotate(-4deg);box-shadow:4px 4px 0 #d1bcae}
.monitor-screen{position:relative;padding:18px;height:155px;border:1.5px solid #62544d;border-radius:6px;background:#f9efcf;overflow:hidden}
.screen-mini{font-size:9px;letter-spacing:1px;color:#856a62}
.monitor-screen strong{display:block;font-family:var(--serif);font-size:35px;line-height:1.05;letter-spacing:-1px;margin-top:13px;color:#875173}
.screen-flower{position:absolute;right:12px;bottom:16px;width:56px;height:56px;color:#baa0d6;transform:rotate(14deg)}
.cursor{font-family:var(--sans);font-weight:400;font-size:26px;color:#a05b76}
.monitor-chin{display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 7px;font-size:10px;color:#71625a}
.monitor-chin i{display:block;width:5px;height:5px;background:#b8ad84;border-radius:50%}
.monitor-foot{position:absolute;left:96px;top:189px;width:92px;height:23px;border:1.5px solid #62544d;background:#e2cfc0;border-radius:0 0 40% 40%;transform:rotate(-4deg)}
.keyboard{position:absolute;top:214px;left:39px;background:#ebded0;border:1.5px solid #62544d;border-radius:4px;width:221px;height:24px;transform:skew(-17deg) rotate(-4deg);padding:4px 8px;display:flex;gap:3px}
.keyboard span{height:14px;width:28px;border:1px solid #bfb1a2;background:#f6e9dd;border-radius:2px}
.keyboard span:last-child{width:130px}

.desktop-folders{display:flex;justify-content:space-between;gap:20px;position:relative;z-index:4;margin-top:17px}
.desktop-folders a{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10px;font-family:monospace;min-width:70px}
.desktop-folders a svg{width:38px;height:32px;color:var(--yellow);transition:transform .2s}
.desktop-folders a:nth-child(2) svg{color:var(--lilac)}
.desktop-folders a:nth-child(3) svg{color:var(--pink)}
.desktop-folders a:hover svg{transform:translateY(-5px)}
.window-status{display:flex;justify-content:space-between;padding:8px 15px;border-top:1px solid var(--ink);background:#fffcf5;font-size:10px;color:#756269}
.sticky-note{position:absolute;bottom:-59px;right:-3px;background:#ffebaf;transform:rotate(-7deg);width:185px;padding:23px 19px 17px;box-shadow:3px 5px 0 #e4c99266;z-index:5;color:#675132}
.sticky-note .tiny-label{font-size:9px;letter-spacing:1.4px}
.sticky-note p{font-family:var(--note);font-size:30px;line-height:1.05;margin:8px 0 11px}
.note-footer{display:block;font-size:11px}
.tape{position:absolute;width:73px;height:22px;top:-11px;left:calc(50% - 36px);transform:rotate(3deg);background:#dcc5e6b3;border-inline:2px dashed #c6accb}
.collage-butterfly{position:absolute;left:3px;bottom:-33px;width:78px;height:66px;color:#ebaa80;transform:rotate(-18deg);z-index:5}
.ticker{background:var(--lilac-light);border-block:1px solid var(--line)}
.ticker-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:20px;font-size:13px}
.ticker svg{width:13px;height:13px;color:var(--accent)}
.section-space{padding-block:83px}
h2{font-family:var(--serif);font-size:49px;font-weight:700;line-height:1.1;letter-spacing:-2px;margin-top:19px}
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center;padding-block:96px 85px}
.about-heading{padding-left:22px}
.about .tiny-label{color:var(--muted)}
.about-doodle{width:139px;height:43px;color:var(--accent);margin:18px 0 0 4px;transform:rotate(-8deg)}
.about-note{position:relative;border:1px solid var(--line);background:#fffdf9;padding:35px 36px 24px;border-radius:2px;box-shadow:5px 5px 0 #ecded466;transform:rotate(-1deg)}
.about-note .tape{background:#f2c3d8a3;border-color:#e3a7c2;width:90px;left:calc(50% - 45px)}
.about-note>p{font-size:16px;color:#60515b;line-height:1.7}
.about-note>p+p{margin-top:17px}
.next-note{display:flex;gap:15px;align-items:center;padding-top:20px;margin-top:22px;border-top:1px dashed var(--line)}
.next-note svg{width:24px;height:24px;flex-shrink:0;color:var(--accent)}
.next-note p{font-size:13px;color:var(--muted);line-height:1.6}
.next-note strong{font-weight:700;color:var(--ink)}
.learning{border-top:1px solid var(--line);padding-top:66px;padding-bottom:66px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:25px}
.section-heading .tiny-label{color:var(--muted)}
.section-aside{font-size:31px;color:var(--accent);transform:rotate(-6deg);margin:0 20px 6px 0;line-height:1.05}
.filter-row{display:flex;align-items:center;gap:9px;margin-top:35px;flex-wrap:wrap}
.filter{padding:8px 16px;border-radius:50px;background:transparent;font-size:13px;border:1px solid var(--line)}
.filter:hover{background:var(--pink-light)}
.filter.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter-caption{font-size:11px;color:var(--muted);margin-left:auto;padding-inline:8px}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:29px;margin-top:28px;align-items:start}
.project{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fffdf9;box-shadow:3px 4px 0 #ecded444}
.project-art{position:relative;height:241px;overflow:hidden;border-bottom:1px solid var(--line)}
.art-number{position:absolute;left:18px;top:17px;border:1px solid #806a76;border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:10px;z-index:4;background:#fff9f377}
.art-web{background:var(--pink-light)}
.tiny-browser{width:64%;position:absolute;left:18%;top:32px;transform:rotate(-5deg);border:1.5px solid #785267;border-radius:7px;overflow:hidden;box-shadow:6px 6px 0 #bb8ba166;background:#fff9f3}
.tiny-browser-bar{display:flex;gap:4px;align-items:center;padding:8px 10px;border-bottom:1px solid #785267;background:var(--pink)}
.tiny-browser-bar i{width:5px;height:5px;background:#fff9f3;border:1px solid #785267;border-radius:50%}
.tiny-browser-bar span{font-size:8px;margin-left:14px;color:#634559}
.tiny-browser-page{position:relative;padding:19px 22px 22px}
.mini-tag{font-size:7px;letter-spacing:1px;color:#856373}
.tiny-browser-page strong{font-family:var(--serif);font-size:31px;line-height:1.05;color:var(--accent);display:block;margin-top:8px}
.mini-button{width:74px;height:12px;border-radius:3px;background:var(--lilac);border:1px solid #9e8cba;margin-top:13px}
.tiny-browser-page svg{position:absolute;width:75px;height:75px;right:20px;top:51px;color:var(--pink)}
.floating-code{position:absolute;bottom:18px;right:20px;transform:rotate(10deg);font-family:monospace;font-size:26px;background:var(--yellow);padding:7px 15px;border:1px solid #b2a078;box-shadow:2px 3px 0 #b99a6755}
.art-vm{background:#eee6f6}
.vm-window{position:absolute;border:1.5px solid #756284;border-radius:6px;overflow:hidden;background:#fff9f3;box-shadow:4px 4px 0 #b8a4cb66;width:230px}
.vm-back{left:17%;top:28px;transform:rotate(-6deg)}
.mini-window-bar{display:flex;justify-content:space-between;align-items:center;background:#d4c2e5;padding:8px 12px;font-size:9px;border-bottom:1px solid #756284}
.mini-window-bar i{width:7px;height:7px;border:1px solid #756284;border-radius:2px}
.vm-terminal{font-family:monospace;font-size:10px;height:101px;padding:20px 15px;color:#6c547c}
.vm-terminal>span{color:#9779ad}
.terminal-line{display:block;margin-top:10px}
.vm-front{right:17%;top:92px;transform:rotate(5deg);width:180px}
.vm-front .mini-window-bar{background:#f0c1d0}
.server-drawing{display:grid;gap:5px;padding:13px 20px 15px}
.server-drawing>div{height:17px;border:1px solid #9d889a;border-radius:2px;display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:#f7effb}
.server-drawing span{width:55%;height:3px;border-block:1px solid #bda4c1}
.server-drawing b{width:3px;height:3px;background:#b897c8;border-radius:50%}
.art-handnote{position:absolute;left:21px;bottom:11px;font-size:22px;color:#806b90;transform:rotate(-3deg)}
.art-network{background:#f1f1df}
.network-lines{position:absolute;inset:0;width:100%;height:100%}
.drawn-cloud{position:absolute;top:34px;left:calc(50% - 58px);width:116px;height:74px}
.drawn-cloud svg{width:116px;height:74px}
.drawn-cloud span{position:absolute;left:42px;top:32px;font-size:13px;color:#6b694f}
.network-vm{position:absolute;top:156px;width:60px;padding:11px 7px;text-align:center;background:#fefff3;border:1.5px solid #7e8267;border-radius:5px;box-shadow:4px 4px 0 #a8b18c55;font-size:11px;font-family:monospace}
.vm-one{left:20%}
.vm-two{right:20%}
.packet-sticker{position:absolute;right:15px;top:42px;background:#fbf4c8;border:1px solid #ac9f65;padding:9px 13px 7px;transform:rotate(9deg);color:#756846}
.packet-sticker span{display:block;font-size:7px;letter-spacing:1px}
.packet-sticker strong{font-size:11px;display:block;margin:3px 0}
.packet-sticker svg{width:19px;height:15px;margin-left:28px}
.art-data{background:#f8e6d9}
.spreadsheet{position:absolute;width:65%;left:16%;top:43px;background:#fff9f3;border:1.5px solid #998375;border-radius:5px;overflow:hidden;transform:rotate(-4deg);box-shadow:6px 6px 0 #c9ab9455}
.sheet-bar{background:#c7cfab;font-size:9px;padding:8px 13px;color:#55663f;border-bottom:1px solid #998375}
.sheet-grid{display:grid;grid-template-columns:18px repeat(4,1fr)}
.sheet-grid>*{min-height:25px;border-right:1px solid #ddd0c6;border-bottom:1px solid #ddd0c6;position:relative}
.sheet-grid b{display:grid;place-items:center;font-size:7px;color:#90786b;background:#f1e7dc;font-weight:400}
.sheet-grid i::after{content:'';position:absolute;top:11px;left:9px;right:12px;height:2px;background:#d9bfad}
.sheet-grid .sheet-selected{background:#dfd9f0;outline:1.5px solid #9c83ba;outline-offset:-1px}
.data-sticker{position:absolute;right:16px;bottom:21px;border:1px solid #b899a7;background:#f6c8d7;padding:8px 15px;transform:rotate(5deg);font-size:11px;box-shadow:3px 3px 0 #c8a5b355}
.data-star{position:absolute;top:17px;right:39px;width:27px;height:27px;color:#bf927b;transform:rotate(14deg)}
.project-content{padding:25px 28px 17px}
.project-tag{font-size:8px;letter-spacing:1.25px;font-weight:700;color:var(--muted)}
h3{font-family:var(--serif);font-size:25px;line-height:1.25;letter-spacing:-.6px;margin-top:9px}
.project-content>p{font-size:14px;line-height:1.65;color:#76646d;margin:11px 0 19px;min-height:46px;max-width:365px}
.project details{border-top:1px solid var(--line)}
.project summary{display:flex;justify-content:space-between;align-items:center;padding-block:12px 3px;font-size:12px;list-style:none;font-weight:700}
.project summary::-webkit-details-marker{display:none}
.project summary:hover{color:var(--accent)}
.project summary>span{font-size:19px;font-weight:400;width:20px;text-align:center;transition:transform .2s}
.project details[open] summary>span{transform:rotate(45deg)}
.project-notes{padding:10px 0 8px}
.project-notes p{font-size:13px;line-height:1.7;color:var(--muted)}
.tool-line{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:31px}
.tool-line .tiny-label{font-size:9px;color:var(--muted);margin-right:8px}
.tool-line>span:not(.tiny-label):not(.handwritten){font-size:11px;border:1px solid var(--line);border-radius:5px;padding:5px 10px;background:#fffdf9}
.tool-line .handwritten{margin-left:auto;font-size:25px;transform:rotate(-4deg);color:var(--accent)}












.footer{display:flex;align-items:center;justify-content:space-between;position:relative;padding-block:45px 48px}
.footer-note{display:block;font-size:32px;color:var(--accent);transform:rotate(-3deg)}
.footer p{font-size:11px;color:var(--muted);margin-top:14px}
.footer p>span[aria-hidden]{margin-inline:6px}
.back-top{font-size:12px;border-bottom:1px solid var(--line);padding-bottom:5px}
.back-top span{margin-left:14px}
.back-top:hover{color:var(--accent);border-color:var(--accent)}
.footer-butterfly{position:absolute;width:47px;height:44px;left:49%;top:52px;color:#eba680;transform:rotate(13deg)}
@media(min-width:1400px){.hero{padding-block:95px 126px}.hero-collage{margin-left:16px}}
@media(max-width:1000px){.wrap{width:calc(100% - 52px)}.hero{gap:25px;padding-block:65px 103px}h1{font-size:68px}h1>span{font-size:96px}.hero-star{top:79px;width:25px;height:25px;right:-29px}.hero-intro{font-size:17px;max-width:325px}.hero-collage{padding-inline:0}.desktop-body{padding:20px 18px 19px}.screen-scene{height:220px}.monitor{width:225px;left:6px}.monitor-screen{height:145px}.monitor-screen strong{font-size:31px}.screen-flower{width:47px;height:47px;right:10px;bottom:12px}.monitor-foot{top:179px;left:79px}.keyboard{top:202px;width:208px;left:21px}.desktop-folders{gap:9px;margin-top:12px}.collage-caption{font-size:23px;left:14px}.sticky-note{width:167px;right:-1px}.sticky-note p{font-size:28px}.about{gap:50px}.about-heading{padding-left:0}.about-note{padding:30px 29px 22px}.project-art{height:221px}.tiny-browser{width:69%;left:15%}.tiny-browser-page{padding:15px 20px 20px}.tiny-browser-page svg{width:64px;height:64px;right:13px;top:45px}.tiny-browser-page strong{font-size:28px}.vm-back{left:13%;width:205px}.vm-front{right:12%;width:159px;top:82px}.art-handnote{font-size:20px;bottom:8px}.spreadsheet{width:70%;left:14%;top:36px}.network-vm{top:142px}.drawn-cloud{top:26px}.tool-line .handwritten{font-size:22px}}
@media(max-width:760px){.header{gap:16px;min-height:90px;flex-wrap:wrap;padding-block:19px 15px}.brand{font-size:25px}.brand svg{width:27px;height:27px}.header nav{order:3;width:100%;justify-content:center;gap:36px;padding-top:4px;font-size:13px}.header nav a{padding:4px 0}.header nav a::after{bottom:0}.theme-toggle{margin-left:auto;font-size:11px;padding:7px 11px}.hero{grid-template-columns:1fr;gap:48px;padding-block:49px 111px}.hero-copy{max-width:480px}.hero-label{font-size:9px;margin-bottom:17px}h1{font-size:72px}h1>span{font-size:102px}.hero-star{top:94px}.hero-intro{max-width:440px;margin-top:17px;font-size:17px}.hero-bottom{margin-top:24px}.button{margin-top:22px}.hero-collage{width:min(450px,100%);margin:0 auto;padding-top:20px}.collage-caption{top:-19px;left:18px;font-size:26px}.desktop-body{padding:23px 23px 19px}.screen-scene{height:230px;max-width:335px}.monitor{width:248px;left:5px}.monitor-screen{height:155px}.monitor-screen strong{font-size:35px}.screen-flower{width:52px;height:52px}.monitor-foot{top:189px;left:86px}.keyboard{top:211px;width:220px;left:24px}.desktop-folders{margin-top:16px;gap:20px}.sticky-note{width:169px;right:2px;bottom:-51px;padding-top:22px}.collage-butterfly{left:9px;bottom:-29px;width:61px;height:55px}.ticker-inner{justify-content:center;flex-wrap:wrap;column-gap:13px;row-gap:11px;font-size:11px;padding-block:17px}.ticker svg{width:10px;height:10px}.ticker svg:nth-of-type(2){display:none}.ticker-inner>span{white-space:nowrap}.about{grid-template-columns:1fr;gap:37px;padding-block:57px 55px}.about-heading{display:block}h2{font-size:42px;line-height:1.15;margin-top:14px}.about-heading h2 br{display:none}.about-doodle{display:none}.about-note{padding:28px 26px 21px}.about-note>p{font-size:15px}.learning{padding-block:48px}.section-aside{font-size:25px;margin-right:0}.filter-caption{display:none}.filter-row{margin-top:27px;gap:7px}.filter{font-size:11px;padding:7px 12px}.project-grid{gap:21px}.project-content{padding:21px 19px 14px}.project-tag{font-size:7px;letter-spacing:.7px}h3{font-size:22px}.project-content>p{font-size:13px;min-height:61px}.project-art{height:194px}.tiny-browser{width:75%;left:13%;top:33px}.tiny-browser-bar{padding:6px 7px}.tiny-browser-bar span{font-size:6px;margin-left:3px}.tiny-browser-page{padding:13px 15px 17px}.tiny-browser-page strong{font-size:24px}.tiny-browser-page svg{width:42px;height:42px;right:9px;top:46px}.mini-tag{font-size:6px}.mini-button{width:58px;height:9px}.floating-code{font-size:19px;right:12px;bottom:14px;padding:5px 10px}.vm-back{left:15%;top:27px;width:70%}.vm-front{right:12%;top:83px;width:62%}.vm-terminal{height:77px;font-size:8px;padding:16px 10px}.mini-window-bar{font-size:7px;padding:6px 9px}.server-drawing{padding:10px 15px 12px;gap:4px}.server-drawing>div{height:13px}.art-handnote{font-size:17px;bottom:5px;left:16px}.network-vm{top:125px;width:48px;padding:8px 5px;font-size:10px}.vm-one{left:17%}.vm-two{right:17%}.drawn-cloud{top:26px;width:95px;left:calc(50% - 47px)}.drawn-cloud svg{width:95px;height:63px}.drawn-cloud span{font-size:11px;left:33px;top:29px}.packet-sticker{top:34px;right:9px;padding:5px 9px}.packet-sticker span{font-size:6px}.packet-sticker strong{font-size:8px}.packet-sticker svg{height:11px;width:17px;margin-left:16px}.spreadsheet{width:75%;left:13%;top:36px}.sheet-grid>*{min-height:22px}.sheet-grid i::after{top:10px;left:5px;right:6px;height:1px}.sheet-bar{font-size:7px;padding:7px 10px}.data-sticker{font-size:8px;right:10px;bottom:14px;padding:7px 10px}.data-star{width:19px;height:19px;right:20px;top:13px}.art-number{left:10px;top:10px;width:22px;height:22px;font-size:8px}.tool-line{gap:8px;margin-top:25px}.tool-line .tiny-label{width:100%}.tool-line .handwritten{width:100%;margin-top:12px;margin-left:1px;font-size:25px}.footer{padding-block:36px 33px}.footer-note{font-size:28px}.footer-butterfly{display:none}.back-top{font-size:11px}.back-top span{margin-left:8px}}
@media(max-width:480px){.wrap{width:calc(100% - 38px)}.header nav{gap:30px}.hero{padding-block:42px 105px;gap:42px}h1{font-size:64px}h1>span{font-size:90px;letter-spacing:-5px}.hero-star{top:79px;right:-28px}.hero-intro{font-size:16px;max-width:310px}.hero-bottom{font-size:10px}.button{font-size:13px;padding:13px 17px}.collage-caption{font-size:23px}.desktop-body{padding:20px 17px 17px}.screen-scene{height:217px;max-width:285px}.monitor{width:222px;left:3px;padding:9px 9px 0}.monitor-screen{height:147px;padding:16px}.monitor-screen strong{font-size:31px}.screen-flower{width:46px;height:46px;bottom:12px;right:8px}.monitor-foot{top:177px;left:74px}.keyboard{top:199px;width:198px;left:21px;height:21px;padding:3px 7px}.keyboard span{height:12px}.desktop-folders{margin-top:11px;gap:12px}.desktop-folders a{font-size:8px;min-width:65px}.desktop-folders a svg{width:33px;height:28px}.window-bar{height:38px;padding-inline:12px;font-size:10px}.window-dots{gap:5px}.window-dots i{width:7px;height:7px}.window-status{font-size:8px;padding:7px 12px}.sticky-note{width:152px;bottom:-52px;right:2px;padding:21px 16px 14px}.sticky-note p{font-size:27px}.note-footer{font-size:10px}.sticky-note .tiny-label{font-size:8px}.ticker-inner{max-width:330px;column-gap:11px;font-size:10px}.ticker svg:nth-of-type(2){display:block}.ticker svg:nth-of-type(3){display:none}.ticker-inner>span:nth-of-type(4){display:none}.about-note{padding-inline:22px}.about-note>p{font-size:14px}h2{font-size:36px;letter-spacing:-1.5px}.section-heading{gap:13px}.section-aside{font-size:21px;align-self:center;margin-bottom:0;width:109px;flex-shrink:0}.section-heading .tiny-label{font-size:8px;letter-spacing:1px}.filter-row{gap:6px}.filter{font-size:10px;padding:7px 11px}.project-grid{grid-template-columns:1fr;gap:23px}.project-art{height:222px}.tiny-browser{width:63%;left:19%;top:30px}.tiny-browser-bar{padding:7px 8px}.tiny-browser-bar span{font-size:7px;margin-left:8px}.tiny-browser-page{padding:16px 18px 19px}.tiny-browser-page strong{font-size:29px}.tiny-browser-page svg{width:56px;height:56px;right:13px;top:45px}.mini-tag{font-size:7px}.mini-button{width:67px;height:11px}.floating-code{right:21px;bottom:18px;font-size:24px}.vm-back{left:16%;top:25px;width:63%}.vm-front{right:16%;top:86px;width:51%}.vm-terminal{height:89px;font-size:9px;padding:17px 13px}.mini-window-bar{font-size:8px;padding:8px 10px}.server-drawing{padding:12px 17px 13px;gap:5px}.server-drawing>div{height:16px}.art-handnote{font-size:21px;bottom:10px;left:21px}.network-vm{top:145px;width:56px;padding:10px 7px;font-size:11px}.vm-one{left:20%}.vm-two{right:20%}.drawn-cloud{top:29px;width:110px;left:calc(50% - 55px)}.drawn-cloud svg{width:110px;height:71px}.drawn-cloud span{font-size:12px;left:39px;top:30px}.packet-sticker{top:39px;right:18px;padding:7px 11px}.packet-sticker span{font-size:7px}.packet-sticker strong{font-size:10px}.packet-sticker svg{height:14px;width:18px;margin-left:25px}.spreadsheet{width:65%;left:16%;top:39px}.sheet-grid>*{min-height:25px}.sheet-grid i::after{top:11px;left:8px;right:9px}.sheet-bar{font-size:8px;padding:7px 12px}.data-sticker{font-size:10px;right:16px;bottom:18px;padding:8px 13px}.data-star{width:25px;height:25px;right:32px;top:17px}.art-number{left:17px;top:16px;width:26px;height:26px;font-size:9px}.project-content{padding:23px 25px 16px}.project-tag{font-size:8px;letter-spacing:1px}h3{font-size:25px}.project-content>p{font-size:14px;min-height:0;margin-bottom:18px}.project summary{font-size:12px;padding-top:13px}.footer-note{font-size:25px}.footer p{font-size:10px}.back-top{font-size:10px}}
@media(max-width:350px){h1{font-size:57px}h1>span{font-size:79px}.hero-star{width:23px;right:-25px;top:68px}.screen-scene{max-width:252px;height:199px}.monitor{width:200px}.monitor-screen{height:133px}.monitor-screen strong{font-size:28px}.screen-flower{width:37px;height:37px}.monitor-foot{top:163px;left:65px}.keyboard{top:184px;width:180px;left:19px}.desktop-folders a{min-width:56px;font-size:7px}.desktop-folders{gap:8px}.collage-caption{font-size:21px}.section-aside{width:91px;font-size:19px}.section-heading h2{font-size:32px}.footer-note{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.header nav,.theme-toggle,.filter-row,.button,.back-top{display:none}.wrap{width:100%}.hero,.section-space{padding-block:25px}.hero{grid-template-columns:1fr 1fr;gap:20px}.hero-collage{transform:scale(.8);transform-origin:center}.about{gap:35px}.project-grid{gap:20px}.project{break-inside:avoid;box-shadow:none}.project[hidden]{display:block!important}.project-art{height:180px}.footer{padding-block:20px}.sticky-note{box-shadow:none}}

.desk-notepad{position:absolute;right:-4px;bottom:25px;width:95px;padding:15px 13px;background:#faf4d7;border:1px solid #bbae83;box-shadow:3px 3px 0 #cfbb9666;transform:rotate(7deg);z-index:3;color:#6f6145}
.desk-notepad span{display:block;font-size:7px;letter-spacing:.7px;text-transform:uppercase;border-bottom:1px solid #dacaa0;padding-bottom:6px}
.desk-notepad strong{display:block;font-family:monospace;font-size:11px;line-height:1.8;padding-top:6px;font-weight:400}
.next-section{background:var(--lilac-light);border-block:1px solid var(--line);padding-block:60px 66px}
.next-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:85px}
.next-section .tiny-label{color:var(--muted)}
.next-section h2{font-size:43px}
.next-copy{color:#60525c;font-size:15px;line-height:1.7;max-width:415px;margin-top:21px}
.next-card{position:relative;padding:30px 31px 25px;background:var(--paper);border:1px solid var(--line);box-shadow:4px 5px 0 #cbbadb44;transform:rotate(1.5deg)}
.next-card .tape{background:#efd4a9b3;border-color:#d6bb8a}
.next-card h3{margin-top:12px;font-size:29px}
.next-card>p{margin-top:14px;font-size:14px;line-height:1.75;color:var(--muted)}
.interest-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.interest-tags>span{padding:5px 9px;border:1px solid var(--line);border-radius:4px;font-size:10px}
@media(max-width:1000px){.desk-notepad{width:86px;padding:13px 11px;right:0;bottom:18px}.desk-notepad strong{font-size:10px}.next-grid{gap:55px}}
@media(max-width:760px){.desk-notepad{width:95px;right:0;bottom:22px;padding:15px 13px}.desk-notepad strong{font-size:11px}.next-section{padding-block:47px 53px}.next-grid{grid-template-columns:1fr;gap:37px}.next-section h2{font-size:38px}.next-copy{max-width:470px}.next-card{padding:27px 27px 24px;max-width:490px}.next-card h3{font-size:27px}}
@media(max-width:480px){.desk-notepad{width:81px;right:-3px;bottom:15px;padding:12px 10px}.desk-notepad strong{font-size:10px}.desk-notepad span{font-size:6px}.next-section h2{font-size:33px}.next-copy{font-size:14px}.next-card{padding-inline:25px}.next-card>p{font-size:13px}}
@media(max-width:350px){.desk-notepad{width:71px;right:-4px;bottom:13px;padding:10px 8px}.desk-notepad strong{font-size:9px}}