@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f4f3ed;--ink:#242520;--muted:#74756d;--line:#dcdcd2;--orange:#fc5833}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a,input{outline-offset:5px}header{height:104px;margin:0 4.2%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:35px;justify-content:space-between}.brand{display:flex;align-items:center;font-weight:700;letter-spacing:-1px;font-size:21px;white-space:nowrap;gap:10px}.mark{position:relative;font-size:37px;font-weight:800;width:33px;line-height:1}.mark span{font-size:22px;position:absolute;right:0;top:-2px;color:var(--orange)}.beta{font-size:8px;letter-spacing:1px;font-weight:500;background:#e6e6dc;padding:6px;margin-left:8px}nav{display:flex;gap:25px;font-size:12px;align-items:center}nav button{border:0;background:none;padding:0}#saved-count{background:#e2e2d8;border-radius:50%;padding:3px 6px;margin-left:3px}.nav-cta{font-size:12px;border-bottom:1px solid;padding:10px 0}.hero{margin:35px 4.2% 44px;display:grid;grid-template-columns:1fr 1fr;min-height:570px;gap:22px}.hero-copy{padding:47px 0 18px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;display:flex;align-items:center;gap:9px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--orange)}h1,h2,h3,p{margin-top:0}h1{font-family:Manrope,sans-serif;font-size:clamp(60px,6.5vw,104px);letter-spacing:-6px;line-height:1.04;font-weight:500;margin:32px 0 25px}em{font-family:Georgia,serif;font-weight:400}h1 em{color:var(--orange)}.intro{font-size:16px;color:#6b6d64;line-height:1.8}.hero-actions{display:flex;align-items:center;gap:23px;margin-top:33px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;padding:17px 21px;font-size:12px;border:0;border-radius:4px;font-weight:500}.dark{background:var(--ink);color:white}.button:hover{transform:translateY(-2px)}.text-button{border:0;background:none;font-size:12px;padding:14px 0;display:flex;gap:20px}.hero-note{font-size:10px;color:var(--muted);margin-top:53px;display:flex;align-items:center;gap:10px}.tiny-lines{font-size:25px}.hero-art{background:#111410;position:relative;overflow:hidden;border-radius:8px;min-height:560px;color:#c6cbbd}.hero-art canvas{width:100%;height:100%;position:absolute;inset:0}.art-top,.art-bottom{position:absolute;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px;pointer-events:none}.art-top{top:25px}.art-bottom{bottom:22px;letter-spacing:0;font-size:10px}.art-bottom button{pointer-events:auto;border:1px solid #52604b;border-radius:50%;height:32px;width:32px;background:transparent;color:white}.live{font-size:7px;display:flex;gap:6px;align-items:center}.live i{background:#b4d5aa;width:5px;height:5px;border-radius:50%}.art-coordinate{position:absolute;right:24px;bottom:80px;font-size:8px;letter-spacing:2px;writing-mode:vertical-rl}.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-around;overflow:hidden;gap:32px;padding:21px 0;white-space:nowrap;font-size:9px;letter-spacing:2px}.ticker b{color:var(--orange);font-size:23px}.collection{padding:83px 4.2% 0}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:35px}h2{font-family:Manrope,sans-serif;font-size:43px;letter-spacing:-1.8px;line-height:1.15;font-weight:500;margin:14px 0 0}.section-heading>p{font-size:12px;color:var(--muted);line-height:1.8;margin:0 0 3px}.tools{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:20px;gap:15px}.tabs{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.tabs button{padding:10px 14px;border:0;background:none;border-radius:4px;color:#6e7066;font-size:11px}.tabs button.active{background:var(--ink);color:white}.tabs small{margin-left:5px;opacity:.6;font-size:9px}.search{display:flex;align-items:center;gap:9px}.search span{font-size:25px}.search input{background:transparent;border:0;font:inherit;font-size:11px;width:130px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 22px;padding-top:29px}.card{min-width:0}.card-preview{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:1.35;background:#151713;cursor:pointer}.card-preview canvas{width:100%;height:100%;display:block}.card-tag{position:absolute;top:16px;left:16px;color:#c9cec2;font-size:8px;letter-spacing:1px}.favourite{position:absolute;top:10px;right:10px;width:32px;height:32px;border:1px solid #ffffff30;color:white;border-radius:50%;background:#0003;font-size:19px;z-index:1}.favourite.selected{background:var(--orange);border-color:var(--orange)}.open-effect{position:absolute;bottom:14px;right:14px;border:0;border-radius:50%;width:33px;height:33px;background:#f4f3ed;color:#242520;font-size:18px;opacity:0;transform:translateY(5px);transition:.2s}.card-preview:hover .open-effect,.card-preview:focus-within .open-effect{opacity:1;transform:none}.card-meta{display:flex;align-items:start;justify-content:space-between;padding:15px 0}.card h3{font-size:15px;margin:0 0 6px;font-weight:500;letter-spacing:-.3px}.card p{font-size:10px;color:var(--muted);margin:0}.card-number{font-size:9px;color:#8b8e81;padding-top:4px}.collection-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:25px 0;font-size:9px;letter-spacing:1px;margin-top:25px}.collection-footer a{letter-spacing:0}.how{border-top:1px solid var(--line);margin:65px 4.2% 80px;padding-top:70px;display:grid;grid-template-columns:1fr 1fr;gap:60px}.how h2{font-size:53px;letter-spacing:-2px;margin:23px 0}.how-title>p:last-child{font-size:12px;color:var(--muted);line-height:1.8}.steps article{display:flex;gap:30px;border-bottom:1px solid var(--line);padding:25px 0}.steps article>span{color:var(--orange);font-size:11px;padding-top:4px}.steps h3{font-size:20px;font-weight:500;margin-bottom:10px}.steps p{font-size:12px;line-height:1.8;max-width:310px;color:var(--muted);margin-bottom:5px}.end{text-align:center;background:var(--orange);padding:55px 20px 65px;color:#25251d}.end-symbol{font-size:42px}.end h2{font-size:66px;margin:20px 0 32px;letter-spacing:-3px}.light{background:var(--paper)}footer{display:flex;margin:0 4.2%;padding:38px 0;align-items:center;justify-content:space-between;gap:20px}footer p,footer>span{font-size:9px;color:var(--muted);margin:0}dialog{max-width:1100px;width:94vw;border:0;border-radius:10px;padding:26px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#141710c9;backdrop-filter:blur(8px)}.editor-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:20px}.editor-head h2{font-size:30px;margin:5px 0}.editor-head .eyebrow{margin-bottom:8px}.editor-head>button{border:1px solid var(--line);border-radius:50%;width:36px;height:36px;background:none}.editor-body{display:grid;grid-template-columns:1fr 245px;gap:26px}.editor-stage{position:relative;border-radius:5px;overflow:hidden;min-height:410px;background:#121510}.editor-stage canvas{position:absolute;width:100%;height:100%}.editor-stage button{position:absolute;bottom:16px;left:16px;background:#131610bb;border:1px solid #ffffff55;border-radius:4px;color:white;font-size:10px;padding:10px}aside>p{font-size:12px;line-height:1.7;color:var(--muted)}aside label{display:block;font-size:12px;margin:23px 0}aside output{float:right;font-size:10px}input[type=range]{display:block;width:100%;margin-top:12px;accent-color:var(--orange)}input[type=color]{float:right;width:38px;height:25px;border:0;background:none;cursor:pointer}.reset{background:none;border:0;padding:0;font-size:10px;color:var(--muted)}.export{display:grid;gap:9px;margin-top:28px}.outline{border:1px solid var(--line);background:transparent}.export-note{font-size:9px;line-height:1.8;margin-top:13px}#status{font-size:11px;color:#8b3b22;min-height:18px}#empty{text-align:center;padding:50px 0;color:var(--muted)}
@media(min-width:1600px){body{max-width:1600px;margin:auto}}@media(max-width:1000px){.beta{display:none}header{gap:15px}nav{gap:16px}.hero{min-height:470px}.hero-art{min-height:470px}h1{font-size:72px;letter-spacing:-4px}.hero-copy{padding-top:30px}.hero-actions{gap:15px}.button{padding:16px;font-size:11px;gap:14px}.hero-note{font-size:9px}.grid{gap:25px 16px}.tabs button{padding:9px;font-size:10px}.how{gap:30px}}@media(max-width:720px){header{height:80px}.brand{font-size:18px}.nav-cta{display:none}nav a:last-of-type{display:none}nav{font-size:10px;gap:12px}.hero{grid-template-columns:1fr;margin-top:10px;gap:25px}.hero-copy{padding-top:30px}h1{font-size:76px;letter-spacing:-4px;margin-top:25px}.intro{font-size:14px}.hero-note{margin-top:27px}.hero-art{min-height:410px}.ticker{justify-content:start;padding-left:20px}.collection{padding-top:50px}.section-heading>p{display:none}h2{font-size:34px}.tools{flex-direction:column}.search{background:#e9e9e0;padding:3px 12px;border-radius:4px}.search input{width:100%;padding:10px}.tabs{gap:0;justify-content:space-between}.tabs button{font-size:9px;padding:9px 7px}.grid{grid-template-columns:repeat(2,1fr);gap:17px 12px}.card-preview{aspect-ratio:1}.card h3{font-size:12px}.card p{font-size:9px}.card-tag{top:12px;left:10px;font-size:6px}.favourite{width:27px;height:27px;right:6px;top:6px;font-size:16px}.open-effect{display:none}.card-number{font-size:8px}.collection-footer{font-size:7px;gap:30px;line-height:1.8}.how{grid-template-columns:1fr;margin:35px 4.2% 50px;padding-top:40px;gap:10px}.how h2{font-size:46px}.steps article{padding:22px 0}.end h2{font-size:52px}footer{flex-wrap:wrap}footer p{order:3;width:100%}footer>span{font-size:8px}.editor-body{grid-template-columns:1fr}.editor-stage{min-height:290px}dialog{padding:18px;max-height:94vh}aside label{margin:19px 0}.editor-head h2{font-size:25px}.export{grid-template-columns:1fr 1fr}.export .button{font-size:10px;gap:5px}aside>p{margin-bottom:10px}.art-top{left:17px;right:17px;font-size:7px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transform:none!important}}

/* Edition 02 — immersive dark studio */
:root{--paper:#090b10;--ink:#eef2f8;--muted:#929cac;--line:#242b38;--orange:#9bf3e9;color-scheme:dark}
body{background:var(--paper)}header{position:absolute;left:0;right:0;top:0;z-index:5;border-color:#ffffff20;height:96px}.beta{background:#ffffff0d;color:#a4afbf}#saved-count{background:#ffffff16}.hero{position:relative;margin:0;min-height:820px;height:calc(100svh - 10px);max-height:1100px;display:flex;align-items:center;padding:140px 6% 100px;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0;border-radius:0;z-index:-2;min-height:0;background:#090b10}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#090b10e8 0%,#090b10b8 28%,#090b1022 62%,transparent 100%),linear-gradient(0deg,#090b10 0%,transparent 20%,transparent 85%,#090b1055);pointer-events:none}.hero-copy{position:relative;z-index:1;padding:0;pointer-events:none}.hero-copy a,.hero-copy button{pointer-events:auto}h1{font-size:clamp(76px,7.9vw,130px);letter-spacing:-7px;line-height:1.02;margin:34px 0 28px}h1 em{font-family:Manrope,sans-serif;font-style:normal;font-weight:500;color:#c2fdf5;letter-spacing:-7px}.intro{color:#aeb9c8;font-size:17px}.hero .eyebrow{color:#afbecb;font-size:9px}.dot{box-shadow:0 0 13px #9bf3e9}.hero-actions{margin-top:36px}.dark{background:#b6f7ee;color:#0c1519}.hero .dark{box-shadow:0 0 35px #6ee9d518}.hero .text-button{color:#d3dce8}.hero-note{color:#758494;margin-top:50px}.art-top{top:auto;bottom:47px;left:6%;right:6%;z-index:2;color:#8b9eae}.art-bottom{bottom:90px;left:auto;right:6%;z-index:2;color:#9baebe;gap:16px}.art-bottom button{border-color:#ffffff3d}.art-coordinate{z-index:2;right:35px;bottom:38%;color:#708493}.ticker{background:#0d1017;border-color:#232a35;color:#8d9ba9}.ticker b{color:#99f4e7}.collection{background:#090b10;padding-top:90px}.tabs button{color:#9aa6b8}.tabs button.active{background:#202a35;color:#d8fff8}.search input{color:#dce6ed}.card-preview{border:1px solid #27303d;background:#10151c}.card-preview:hover{border-color:#7aaba9}.favourite{backdrop-filter:blur(10px)}.favourite.selected{background:#87e2d6;color:#091411}.card h3{color:#e4ebf4}.card-number{color:#718296}.open-effect{background:#b6f7ee}.how{border-color:#242b38}.steps article>span{color:#9bf3e9}.end{background:radial-gradient(ellipse at 50% 100%,#16363b,#0d121b 65%);border-top:1px solid #263441;color:#eaf5f5}.end h2 em{color:#a2f5e6}.light{background:#b6f7ee;color:#102020}.hero-art canvas{cursor:crosshair}.editor-head>button{color:var(--ink)}.search{color:#99a9bb}.outline{color:var(--ink)}.export .dark{color:#0c1519}#status{color:#a2e7d4}.editor-stage{background:#111510}.card-tag{color:#c9cec2}
@media(max-width:1000px){.hero{min-height:760px;padding-top:150px}.hero-copy{padding:0}h1{font-size:92px;letter-spacing:-5px}h1 em{letter-spacing:-5px}}
@media(max-width:720px){header{height:80px}.hero{min-height:770px;max-height:950px;height:100svh;padding:138px 6% 150px;align-items:flex-start;margin:0;display:block}.hero-copy{padding:0}.hero-art{min-height:0}.hero-art:after{background:linear-gradient(180deg,#090b1066 0%,#090b1077 32%,#090b1022 62%,#090b10 100%),linear-gradient(90deg,#090b1077,transparent)}h1{font-size:76px;letter-spacing:-5px;margin-top:30px}h1 em{letter-spacing:-5px}.intro{font-size:14px;color:#b5c3cf}.hero-note{font-size:9px;margin-top:26px}.hero .eyebrow{font-size:7px;letter-spacing:1.4px}.art-top{bottom:28px;left:6%;right:6%;font-size:6px}.art-bottom{bottom:66px;right:6%;font-size:8px}.art-coordinate{display:none}.hero-actions{gap:22px}.search{background:#141b25}.collection{padding-top:55px}.end h2{font-size:52px}.tabs button.active{background:#26323d}}
/* Colour studio */
.editor-body{grid-template-columns:minmax(0,1fr) 292px;align-items:start}.editor-stage{position:sticky;top:0;min-height:560px}.editor-body aside{min-width:0}.colour-studio{margin-top:24px;padding:18px;background:#10151e;border:1px solid #293241;border-radius:12px}.studio-title{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#aebdce}.studio-title span:last-child{color:#9bf3e9;font-size:8px}.mode-switch{display:flex;background:#080c13;border:1px solid #283344;padding:4px;border-radius:7px;margin:16px 0}.mode-switch button{flex:1;border:0;background:none;color:#899bad;padding:9px;font-size:11px;border-radius:4px}.mode-switch button[aria-pressed=true]{background:#293b43;color:#c7fff5}.wheel-wrap{width:216px;height:216px;position:relative;margin:18px auto}#hue-wheel{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);touch-action:none;cursor:crosshair;box-shadow:0 0 25px #0004}#hue-wheel:before{content:'';position:absolute;inset:27px;border-radius:50%;background:#10151e}#hue-handle{position:absolute;width:15px;height:15px;border-radius:50%;border:2px solid white;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0009;pointer-events:none}#shade-field{position:absolute;width:108px;height:108px;left:54px;top:54px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);border-radius:5px;touch-action:none;cursor:crosshair;box-shadow:0 0 0 5px #10151e}#shade-handle{position:absolute;width:12px;height:12px;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 4px #000a;pointer-events:none}.colour-values{display:flex;align-items:center;gap:10px;border:1px solid #2e3b4c;border-radius:6px;padding:10px;background:#0a1018}.colour-values label{margin:0;font-size:8px;color:#8191a7;letter-spacing:1px}.colour-values input{width:100%;min-width:0;background:none;border:0;color:#e8f2f8;font:12px monospace;padding:0}.colour-values>span{width:22px;height:22px;border-radius:4px;flex-shrink:0;border:1px solid #ffffff40}.colour-presets{display:flex;gap:9px;margin-top:13px}.colour-presets button{flex:1;height:22px;border:1px solid #ffffff20;border-radius:4px;background:linear-gradient(110deg,var(--a),var(--b))}.gradient-preview{height:25px;border-radius:4px;margin:15px 0 9px}.stop-buttons{display:flex;gap:6px}.stop-buttons button{border:1px solid #354154;border-radius:5px;background:#131b28;color:#90a0b5;font-size:10px;padding:8px;flex:1}.stop-buttons button[aria-pressed=true]{color:#fff;background:#293342;box-shadow:0 0 0 1px #ffffff70}.stop-buttons button:last-child{flex:0;font-size:16px;padding:3px 10px}.colour-studio label{font-size:10px}.colour-studio input[type=range]{height:4px}.background-control{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #293241;margin-top:17px;padding-top:12px}.background-control label{margin:0}.background-control input{float:none;width:42px;height:26px}.colour-studio [hidden]{display:none!important}.editor-head{margin-bottom:16px}#status textarea{color:#eaf2f8;background:#131b28;border:1px solid #405167}.export .button{width:100%}@media(max-width:720px){.editor-body{grid-template-columns:1fr}.editor-stage{position:relative;min-height:300px}.colour-studio{margin-top:18px}.wheel-wrap{width:240px;height:240px}#shade-field{width:120px;height:120px;left:60px;top:60px}.export{grid-template-columns:1fr}.export .button{font-size:12px}.editor-head h2{font-size:24px}}

.colour-help{font-size:10px;line-height:1.5;color:#9baebe;margin:12px 0}.stop-buttons{flex-wrap:wrap}.stop-buttons button{font-size:9px}.colour-presets{flex-wrap:wrap}

/* Orbital Reactor — spatial collection */
.orbital-feature{padding:72px 4.2% 0}.orbital-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:22px}.orbital-heading p{margin:0}.orbital-heading>p:last-child{font-size:11px;color:var(--muted)}.new-badge{background:#ffd17d;color:#17120b;padding:5px 8px;font-size:8px;letter-spacing:1px}.orbital-stage{position:relative;height:650px;background:#07090f;border:1px solid #393026;border-radius:10px;overflow:hidden;isolation:isolate}.orbital-stage canvas{position:absolute;right:0;top:0;width:78%;height:100%;cursor:crosshair}.orbital-caption{position:absolute;left:5%;top:16%;pointer-events:none}.orbital-caption .eyebrow{font-size:8px;letter-spacing:2px;color:#cfb491}.orbital-caption h2{font-size:clamp(52px,5.8vw,86px);letter-spacing:-4px;margin:28px 0 22px;line-height:1.03;font-weight:500}.orbital-caption h2 em{font-family:inherit;font-style:normal;color:#ffd49a}.orbital-caption p{font-size:13px;line-height:1.8;color:#a8a19a}.orbital-cta{pointer-events:auto;margin-top:21px;background:#ffd49a;color:#21170b}.orbital-foot{position:absolute;left:5%;right:4%;bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#978f85;font-size:9px;pointer-events:none}.orbital-foot button{pointer-events:auto;background:#101016b3;color:#e4d3bc;border:1px solid #564633;border-radius:5px;padding:10px 14px;font-size:10px}#orbital-controls{border-top:1px solid #293241;padding-top:4px;margin-bottom:25px}#orbital-controls[hidden]{display:none}.card:first-child .card-tag{color:#ffe0af}.card-preview{touch-action:pan-y}
@media(max-width:1000px){.orbital-stage{height:580px}.orbital-caption h2{font-size:62px}.orbital-stage canvas{width:90%;right:-8%}.orbital-caption{left:4%}}
@media(max-width:720px){.orbital-feature{padding-top:45px}.orbital-heading{align-items:start}.orbital-heading>p:last-child{display:none}.orbital-heading .eyebrow{font-size:8px;letter-spacing:1px}.orbital-stage{height:670px}.orbital-stage canvas{width:100%;height:440px;right:0;top:170px}.orbital-caption{top:29px;left:7%;right:7%}.orbital-caption h2{font-size:49px;letter-spacing:-2px;margin:16px 0 14px;line-height:1}.orbital-caption h2 br{display:none}.orbital-caption p{font-size:11px}.orbital-caption p br{display:none}.orbital-cta{margin-top:0;padding:12px 16px;font-size:11px}.orbital-foot{left:7%;right:7%;bottom:22px;font-size:8px}.orbital-foot>span{max-width:135px;line-height:1.6}.orbital-foot button{font-size:9px}.editor-stage{height:340px}#orbital-controls label{font-size:12px}}

/* Brand sequences: a complete reusable experience. */
.sequence-feature{margin:72px 4.2% 0;display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}.sequence-image{position:relative;min-height:430px;background:#702439;overflow:hidden}.sequence-image>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.sequence-image::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 60%,#16232380);pointer-events:none}.sequence-stamp{position:absolute;left:28px;top:26px;color:white;font:600 20px Manrope,sans-serif;letter-spacing:2px}.sequence-stamp small{font:8px 'DM Sans',sans-serif;letter-spacing:1.2px}.sequence-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border:1px solid #ffffff99;border-radius:50%;background:#702439d9;color:#fff;font-size:20px;z-index:1}.sequence-time{position:absolute;bottom:24px;left:28px;z-index:1;color:white;font-size:9px;letter-spacing:1px}.sequence-copy{padding:45px 10%}.sequence-copy h2{font-size:clamp(35px,3.5vw,58px);margin:24px 0}.sequence-copy>p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.8;max-width:340px}.sequence-chips{display:flex;flex-wrap:wrap;gap:7px;margin:23px 0}.sequence-chips span{border:1px solid var(--line);padding:6px 8px;font-size:9px;border-radius:20px}.sequence-download{display:block;font-size:11px;margin-top:19px;text-decoration:underline;text-underline-offset:4px}
#sequence-dialog{width:min(1200px,96vw);max-height:94svh;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);padding:24px;overflow:auto}#sequence-dialog::backdrop{background:#090b10d9}.sequence-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:15px}.sequence-dialog-head h2{font-size:30px;margin:6px 0 15px}.sequence-dialog-head .eyebrow{font-size:8px}.sequence-dialog-head button{border:1px solid var(--line);background:none;width:37px;height:37px;border-radius:50%;font-size:18px}.sequence-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 0 16px;font-size:11px}.sequence-toolbar button{padding:8px 14px;border:1px solid var(--line);background:transparent;border-radius:4px;font-size:11px}.sequence-toolbar button[aria-pressed=true]{background:var(--ink);color:white}.sequence-preview-wrap{background:#dfdfd7;border-radius:8px;overflow:hidden;display:flex;justify-content:center;align-items:start;max-height:70svh;overflow-y:auto}.sequence-preview-wrap iframe{width:100%;height:600px;border:0;display:block;background:#f6f3ec;flex:none}.sequence-preview-wrap iframe.phone-preview{width:min(390px,100%);height:760px}.sequence-export{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.sequence-export .outline{border:1px solid var(--line);background:transparent;color:var(--ink)}.sequence-help,#sequence-status{font-size:11px;line-height:1.6;color:var(--muted);margin:14px 0 0}.sequence-prompt{margin-top:20px;border-top:1px solid var(--line);padding-top:15px;font-size:12px}.sequence-prompt summary{cursor:pointer}.sequence-prompt pre{white-space:pre-wrap;max-height:340px;overflow:auto;font:12px/1.65 ui-monospace,monospace;background:#eaeae2;padding:16px}
@media(max-width:720px){.sequence-feature{grid-template-columns:1fr;margin-top:45px}.sequence-image{min-height:300px}.sequence-copy{padding:30px 7%}.sequence-copy h2{font-size:40px}.sequence-dialog-head h2{font-size:23px}#sequence-dialog{padding:15px}.sequence-preview-wrap iframe{height:680px}.sequence-export .button{flex:1 1 44%;font-size:10px;padding:13px 10px;gap:8px}.sequence-toolbar{font-size:10px}.sequence-stamp{font-size:16px}}

/* True viewport simulations; the on-page sequence plays as a live loop. */
.sequence-image{min-height:0;align-self:center;aspect-ratio:16/10}.sequence-image::after{display:none}.sequence-image iframe{border:0;display:block;pointer-events:none;max-width:none}.sequence-play{left:auto;right:16px;top:16px;transform:none;width:38px;height:38px;font-size:18px;background:#702439cc}.sequence-time{left:16px;bottom:16px;font-size:8px;background:#162323b3;padding:7px 9px;border-radius:3px}.sequence-preview-wrap{display:block;position:relative;min-height:0;max-height:none;overflow:hidden}.sequence-preview-wrap iframe{max-width:none;flex:none}.sequence-toolbar button{min-width:82px}@media(max-width:639px){.sequence-image{aspect-ratio:390/700;min-height:0}.sequence-feature{grid-template-columns:1fr}.sequence-image iframe{max-width:none}}

/* Approved compact hero framing. */
.sequence-image{aspect-ratio:1440/605}@media(max-width:639px){.sequence-image{aspect-ratio:1;min-height:0}}
.sequence-toolbar button[aria-pressed=true]{background:#702439;color:#fff;border-color:#702439}
.jopo-release{margin:20px 5% 70px;border:1px solid #c6c7bd;padding:36px;display:flex;align-items:center;justify-content:space-between;gap:40px}.jopo-release h2{font-size:clamp(30px,3vw,48px);line-height:1.05;margin:16px 0}.jopo-release p{max-width:500px;font-size:14px;line-height:1.7}.jopo-release-links{display:flex;flex-direction:column;gap:15px;font-size:12px;flex-shrink:0}@media(max-width:700px){.jopo-release{padding:25px;display:block}.jopo-release-links{margin-top:25px}}
/* HD Events addition */.hd-card-frame{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}.hd-dialog{padding:0;width:min(1100px,96vw);max-width:96vw;background:#080b10;color:#e9eef2;border:1px solid #ffffff24;border-radius:12px;overflow:hidden}.hd-dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}.hd-dialog-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;font-size:10px;letter-spacing:.12em}.hd-dialog-head button{border:1px solid #ffffff33;border-radius:50%;width:36px;height:36px;color:inherit;background:none;cursor:pointer}.hd-dialog>iframe{display:block;width:100%;height:min(76dvh,850px);border:0}.hd-dialog>a{display:block;padding:13px 20px;color:#8eddd6;font-size:12px}.card-preview .hd-card-frame~.card-tag,.card-preview .hd-card-frame~button{z-index:2}

/* Original client websites shown in context, with all effect editors retained. */.website-casebar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.website-casebar>div{display:flex;gap:7px;flex-wrap:wrap}.website-casebar button{padding:10px 15px;border:1px solid #ffffff25;border-radius:4px;background:transparent;color:#b9c5cd;font:inherit;font-size:11px;cursor:pointer}.website-casebar button[aria-pressed=true]{background:#9bf3e91a;border-color:#9bf3e9;color:#9bf3e9}.sequence-feature .sequence-image{aspect-ratio:auto;background:#030407;border:1px solid #ffffff1a;border-radius:8px;overflow:hidden}.website-preview{position:relative;overflow:hidden;background:#030407;min-height:0;aspect-ratio:auto}.website-card-frame{pointer-events:none}.website-preview .card-tag{background:#05070bbd;padding:6px 8px;border-radius:3px;z-index:2}.website-preview button{z-index:3}.sequence-copy .sequence-chips{margin-top:22px}.sequence-play{z-index:4}.sequence-time{z-index:3}@media(max-width:639px){.website-casebar{gap:12px}.website-casebar button{font-size:10px;padding:8px 11px}}

.context-view-switch{display:flex;gap:8px;padding:10px 20px;border-block:1px solid #ffffff15;flex-wrap:wrap}.context-view-switch button{background:transparent;border:1px solid #ffffff25;color:inherit;padding:9px 12px;border-radius:4px;font:inherit;font-size:11px;cursor:pointer}.context-view-switch button[aria-pressed=true]{background:#9bf3e91a;border-color:#9bf3e9;color:#9bf3e9}.hd-dialog>iframe{height:min(70dvh,800px)}

/* Device framing keeps the actual website live inside each screen. */
.sequence-feature .sequence-image{padding:44px 30px 56px;background:radial-gradient(ellipse at 50% 40%,#203039,#10151d 70%);border:0;overflow:visible;align-self:stretch;display:flex;align-items:center;justify-content:center}
.device-shell{position:relative;flex:none;width:100%;padding:11px 11px 20px;background:linear-gradient(135deg,#3a424d,#11161d 35%,#252e39);border:1px solid #67727e;border-radius:14px 14px 7px 7px;box-shadow:0 28px 35px -14px #000b;margin:0 auto 12px}
.device-shell:before{content:'';position:absolute;top:4px;left:50%;width:4px;height:4px;border-radius:50%;background:#080b10;box-shadow:0 0 0 1px #526173}
.device-screen{position:relative;overflow:hidden;background:#030407;border-radius:3px;width:100%}
.device-base{position:absolute;left:-5%;bottom:-11px;width:110%;height:13px;background:linear-gradient(#9da5ad,#4c5662 35%,#87919d 55%,#2a313b);border-radius:2px 2px 50% 50% / 2px 2px 12px 12px;box-shadow:0 12px 16px -8px #000}
.device-base:after{content:'';position:absolute;top:0;left:43%;width:14%;height:4px;background:#343d48;border-radius:0 0 5px 5px}
.device-shell[data-device=mobile]{width:min(100%,270px);padding:10px;border:2px solid #7b8795;border-radius:36px;background:linear-gradient(110deg,#444c57,#10151d 30%,#303a46);margin-bottom:0;box-shadow:18px 25px 35px -14px #000b}
.device-shell[data-device=mobile] .device-screen{border-radius:24px}
.device-shell[data-device=mobile]:before{z-index:3;top:18px;width:29%;height:15px;border-radius:12px;background:#080a0e;transform:translateX(-50%);box-shadow:none}
.device-shell[data-device=mobile] .device-base{left:auto;right:-5px;top:100px;bottom:auto;width:3px;height:40px;border-radius:2px;background:#74808e;box-shadow:none}
.device-shell[data-device=mobile] .device-base:after{display:none}
.website-preview{padding:22px 20px 28px!important;background:radial-gradient(ellipse at center,#233039,#10151c)!important;display:flex;align-items:center;justify-content:center}
.website-preview .device-shell{pointer-events:none}.website-preview .card-tag{position:absolute;bottom:12px;left:12px}
@media(max-width:639px){.sequence-feature .sequence-image{padding:30px 22px 54px}.website-preview{padding:24px 20px 38px!important}.website-preview .device-shell[data-device=mobile]{width:min(100%,230px)}.sequence-time{bottom:16px}}

/* Website previews: badges must never stretch over the live screen. */
.website-preview>.card-tag{top:12px;bottom:auto;left:12px;right:auto;width:max-content;max-width:calc(100% - 64px);height:auto;pointer-events:none}
.grid{grid-template-columns:repeat(6,minmax(0,1fr))}.grid>.card{grid-column:span 2}.grid>.card:has(.website-preview){grid-column:span 3}
.website-preview .open-effect{display:block;opacity:1;transform:none;z-index:4}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid>.card{grid-column:span 1}.grid>.card:has(.website-preview){grid-column:1/-1}.card:has(.website-preview) h3{font-size:18px}.card:has(.website-preview) p{font-size:11px}.website-preview{padding:44px 26px 30px!important}.website-preview .device-shell[data-device=mobile]{width:min(100%,310px)}.website-preview>.card-tag{font-size:8px;top:14px;left:14px}.website-preview>.favourite{top:10px;right:10px}}
.golden-feature{display:grid;grid-template-columns:.85fr 1.2fr;align-items:center;gap:50px;padding:70px 5%;background:#12171d;border-block:1px solid #bc965133}.golden-feature .eyebrow{color:#e4bd68}.golden-feature h2{margin:20px 0;font-size:clamp(32px,3.6vw,60px);letter-spacing:-2px}.golden-feature h2 em{color:#e4bd68}.golden-feature-copy>p:not(.eyebrow){line-height:1.8;font-size:13px;color:#b5bcc5;margin:0 0 25px;max-width:480px}.golden-feature-preview{border:1px solid #6b5837;border-radius:8px;overflow:hidden;background:#080d11}.golden-feature video{display:block;width:100%;aspect-ratio:1.455;object-fit:cover}.golden-feature-preview>span{display:block;padding:13px 16px;font-size:8px;letter-spacing:1.5px;color:#d7ba78}.card-preview>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}@media(max-width:750px){.golden-feature{grid-template-columns:1fr;padding:45px 6%;gap:28px}.golden-feature h2{font-size:38px}.golden-feature-preview{order:-1}}