:root {
  --bg:#fbfbfd; --white:#fff; --ink:#1d1d1f; --muted:#74747a; --muted2:#939399;
  --border:#e7e7e9; --soft:#f5f5f7; --blue:#0066cc; --bluehover:#004f9f;
  --radius:24px; --container:1152px;
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body {background:var(--bg);color:var(--ink);margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.has-modal{overflow:hidden}
a{text-decoration:none;color:inherit}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}img{max-width:100%;display:block}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible,.flip-card:focus-visible{outline:3px solid #80baff;outline-offset:3px}
.container{width:min(calc(100% - 72px),var(--container));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:30;height:66px;background:rgba(251,251,253,.87);border-bottom:1px solid rgba(0,0,0,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.nav-shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;font-size:17px;letter-spacing:-.7px;font-weight:690}
.brand-icon{position:relative;background:#202127;border-radius:11px;width:31px;height:31px;display:grid;place-items:center;transform:rotate(-5deg)}
.brand-icon span{position:absolute;width:6px;height:6px;border-radius:2px;background:white}
.brand-icon span:nth-child(1){top:8px;left:8px}.brand-icon span:nth-child(2){top:8px;right:8px}.brand-icon span:nth-child(3){bottom:8px;left:8px}.brand-icon span:nth-child(4){bottom:8px;right:8px;background:#bdd5fd}
.main-nav{display:flex;align-items:center;gap:38px;margin-left:auto;margin-right:auto;height:100%}
.main-nav a{height:100%;display:flex;align-items:center;color:#66666a;font-size:13px;font-weight:540;position:relative;transition:color .2s}
.main-nav a:hover,.main-nav a.active{color:#171719}
.main-nav a.active:after{content:"";position:absolute;bottom:-1px;height:2px;background:#222;width:100%;left:0}
.nav-contact{color:#242428;background:transparent;border:1px solid #d6d6da;border-radius:100px;padding:9px 16px;font-size:12px;font-weight:640;white-space:nowrap;transition:all .2s}
.nav-contact:hover{border-color:#a5a5ab;background:#fff}.nav-contact span{margin-left:9px;color:#85858d}
.view{display:none}.view.active{display:block}
.hero{display:grid;grid-template-columns:.98fr 1.02fr;gap:7%;min-height:600px;padding-top:84px;padding-bottom:80px;align-items:center}
.hero-content{min-width:0}.eyebrow{font-size:11px;color:#77777d;letter-spacing:1.5px;font-weight:700;display:flex;align-items:center;gap:11px;margin:0 0 30px}.eyebrow-line{width:27px;height:1px;background:#5e5e62;display:block}
.hero h1{margin:0;letter-spacing:-4.4px;line-height:1.13;font-size:clamp(51px,5.5vw,79px);font-weight:730}.hero h1 span{color:#8b8b92}
.hero-lead{font-size:16px;line-height:1.9;color:#626269;max-width:480px;margin:28px 0 30px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}.button{border:1px solid transparent;border-radius:100px;padding:14px 21px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:15px;font-size:14px;font-weight:600;transition:transform .2s,background .2s,border-color .2s;white-space:nowrap}
.button:hover{transform:translateY(-1px)}.button-dark{background:#1d1d1f;color:white}.button-dark:hover{background:#38383c}.button-outline{border-color:#cfcfd3;color:#1d1d1f;background:transparent}.button-outline:hover{background:#f2f2f4}.button-white{color:#222228;background:white}.button-white:hover{background:#eaeaf0}.full-button{width:100%}
.hero-caption{font-size:12px;display:flex;align-items:center;gap:10px;margin-top:25px;color:#87878d}.status-dot{width:7px;height:7px;background:#459a71;border-radius:100%;box-shadow:0 0 0 4px rgba(69,154,113,.1)}
.hero-visual{height:460px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.hero-backdrop{position:absolute;border-radius:38px;inset:28px 2px 20px 20px;background:linear-gradient(135deg,#e7eae7,#e6e9ed 45%,#f1e9e5);transform:rotate(2deg)}
.browser-mockup{position:relative;background:#fff;border-radius:17px;border:1px solid rgba(255,255,255,.9);width:min(92%,525px);box-shadow:0 30px 65px rgba(39,41,54,.13);overflow:hidden;transform:rotate(-2deg)}
.browser-toolbar{height:46px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ededf0;padding:0 18px;color:#a1a1a8;font-size:10px;letter-spacing:.2px}.window-dots{display:flex;gap:5px}.window-dots i{width:7px;height:7px;background:#e6e6eb;border-radius:50%}.window-dots i:first-child{background:#d9a6a0}.window-dots i:nth-child(2){background:#e9d4a1}.window-dots i:nth-child(3){background:#a6cba8}.browser-toolbar-icon{font-size:16px;color:#777}
.browser-inside{padding:38px 34px 32px}.mock-label{font-size:10px;color:#88928a;letter-spacing:1.8px;font-weight:700;margin:0 0 14px}.browser-inside h2{font-size:clamp(22px,2.5vw,35px);line-height:1.3;letter-spacing:-1.2px;font-weight:680;margin:0 0 9px}.mock-sub{margin:0 0 30px;font-size:12px;color:#a1a1a5}.mock-swatches{display:flex;gap:7px;height:125px}.mock-swatches span{flex:1;border-radius:8px}.mock-swatches span:nth-child(1){background:#d6ab96}.mock-swatches span:nth-child(2){background:#c1c5ae}.mock-swatches span:nth-child(3){background:#899a94}.mock-swatches span:nth-child(4){background:#6d747c}.mock-swatches span:nth-child(5){background:#e8d8c4}.mock-foot{border-top:1px solid #f0f0f0;margin-top:28px;padding-top:19px;display:flex;justify-content:space-between;font-size:10px;color:#929298;font-weight:600}
.hero-chiplike{position:absolute;bottom:14px;left:0;background:rgba(255,255,255,.98);border:1px solid #ededee;box-shadow:0 12px 35px rgba(39,41,54,.08);border-radius:12px;padding:13px 18px;color:#4f4f53;font-size:12px;transform:rotate(1deg)}
.feature-divider{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:24px 0;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:#78787f}.feature-divider b{font-size:17px;font-weight:700;color:#202023;margin-right:3px}
.section{padding-top:110px;padding-bottom:120px}.section-topline{display:flex;align-items:center;justify-content:space-between;color:#92929a;font-size:11px;font-weight:720;letter-spacing:1.7px;gap:18px;margin-bottom:28px}
.section-topline .inline-link{font-size:13px;letter-spacing:0;color:#0066cc;font-weight:620}.inline-link:hover{text-decoration:underline}.inline-link span{margin-left:5px}
.section-heading{display:flex;justify-content:space-between;gap:36px;align-items:flex-end;margin-bottom:38px}.section-heading h2,.how-section h2{margin:0;font-size:clamp(35px,4vw,52px);letter-spacing:-2px;line-height:1.25;font-weight:720}.section-heading p{font-size:13px;line-height:2;color:#8a8a90;margin:0 0 3px;max-width:340px}
.works-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.work-card{min-width:0;border:1px solid #ebebee;border-radius:22px;overflow:hidden;background:#fff;transition:box-shadow .22s,transform .22s}.work-card:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(23,24,30,.07)}.work-card:focus-within{outline:1px solid #9fc6f9}
.work-cover{height:276px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.work-cover.flagship{background:radial-gradient(ellipse at 78% 24%,#49546b 0%,transparent 56%),linear-gradient(150deg,#252c39,#141a23)}
.work-cover.palette{background:#eaece6}.work-cover.habit{background:#eff0ec}.work-cover.timer{background:#e4e9ec}.work-cover.game2048{background:#f0e8df}.work-cover.memory{background:#e7e7ee}
.cover-badge{position:absolute;top:18px;left:19px;background:rgba(255,255,255,.89);border:1px solid rgba(0,0,0,.04);border-radius:100px;font-size:10px;letter-spacing:.3px;font-weight:690;padding:7px 12px;color:#4b4b52;z-index:2}.flagship .cover-badge{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.14)}
.cover-symbol{position:absolute;top:17px;right:20px;font-size:11px;color:rgba(30,30,30,.42);letter-spacing:1.2px}.flagship .cover-symbol{color:#c7d1db}
.cover-showcase{position:relative}.mini-phone{width:161px;height:258px;border-radius:27px;background:#111823;border:6px solid #1d2430;box-shadow:16px 20px 35px rgba(0,0,0,.24);transform:rotate(-8deg);padding:17px 14px;color:white}.mini-phone .phone-notch{height:7px;width:45px;border-radius:30px;background:#344354;margin:-8px auto 19px}.mini-phone .phone-kicker{letter-spacing:1.5px;font-size:8px;color:#94a2b8}.mini-phone h4{font-size:20px;margin:11px 0 17px;font-weight:660;letter-spacing:-.5px;line-height:1.35}.mini-phone .phone-card{background:#ece5dc;border-radius:9px;height:76px;display:flex;gap:5px;justify-content:center;align-items:center;padding:8px}.phone-card i{display:block;flex:1;height:100%;border-radius:4px;background:#a9b7ac}.phone-card i:first-child{background:#c49989}.phone-card i:nth-child(3){background:#7b7885}.mini-phone p{font-size:8px;color:#acb3bf;margin-top:16px}
.phone-side-note{position:absolute;left:98px;bottom:15px;background:white;color:#36404e;border-radius:10px;white-space:nowrap;padding:12px 15px;box-shadow:0 12px 20px rgba(0,0,0,.1);font-size:12px;font-weight:610;transform:rotate(4deg)}
.palette-window{width:300px;border:1px solid #f6f6f5;background:#fff;border-radius:15px;padding:23px 21px 22px;transform:rotate(-5deg);box-shadow:0 17px 38px rgba(80,83,75,.09)}
.palette-window small,.habit-sheet small{font-size:9px;color:#979995;letter-spacing:1.5px;font-weight:700}.palette-window h4{font-size:18px;letter-spacing:-.5px;margin:9px 0 22px}.palette-window .mini-colors{height:112px;display:flex;gap:7px}.mini-colors i{flex:1;border-radius:7px}.mini-colors i:nth-child(1){background:#cc9b8a}.mini-colors i:nth-child(2){background:#c2ccad}.mini-colors i:nth-child(3){background:#788e88}.mini-colors i:nth-child(4){background:#e9d3b3}.palette-window .mini-caption{font-size:10px;margin-top:13px;color:#a8a8ad}
.habit-sheet{width:292px;background:#fff;border-radius:14px;padding:24px;transform:rotate(-4deg);box-shadow:0 17px 36px rgba(50,50,50,.08)}.habit-sheet h4{margin:12px 0 21px;font-size:19px;letter-spacing:-.6px}.habit-row{border-bottom:1px solid #f1f1f1;padding:11px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#4f5055}.habit-mark{width:19px;height:19px;display:grid;place-items:center;background:#95b39d;border-radius:6px;color:white;font-size:11px}.habit-mark.unchecked{border:1px solid #dfdfdf;background:#fff}.habit-footer{display:flex;gap:6px;margin-top:18px}.habit-footer i{height:12px;border-radius:4px;flex:1;background:#dce8dc}.habit-footer i:last-child{background:#e5e5e7}
.timer-dial{width:205px;height:205px;border-radius:50%;background:#fff;border:13px solid #cad9dc;box-shadow:0 18px 38px rgba(53,73,81,.08);display:flex;flex-direction:column;align-items:center;justify-content:center}.timer-dial strong{font-size:49px;font-weight:590;letter-spacing:-2px}.timer-dial span{font-size:10px;color:#818b92;letter-spacing:1.4px;margin-top:4px}
.mini-game-board{padding:12px;border-radius:16px;background:#baab9c;box-shadow:0 20px 40px rgba(90,74,57,.15);display:grid;grid-template-columns:repeat(4,45px);gap:8px;transform:rotate(-4deg)}.mini-game-board i{height:45px;border-radius:5px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#574e47;font-style:normal;font-weight:710}.mini-game-board i.v2{background:#eee4da}.mini-game-board i.v4{background:#eee0c8}.mini-game-board i.v8{background:#f2b179;color:#fff}.mini-game-board i.v16{background:#f59563;color:#fff}
.mini-flip-board{display:grid;grid-template-columns:repeat(4,57px);gap:9px;transform:rotate(4deg)}.mini-flip-board i{height:64px;background:#fff;border-radius:9px;display:grid;place-items:center;font-style:normal;color:#a2a2bb;font-size:22px;box-shadow:0 11px 21px rgba(70,70,110,.09)}.mini-flip-board i.on{background:#737987;color:#fff}
.work-meta{padding:23px 25px 26px}.work-meta-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.work-meta h3{font-size:20px;letter-spacing:-.55px;margin:0;font-weight:690}.work-meta p{font-size:13px;color:#89898e;line-height:1.65;margin:10px 0 20px;min-height:20px}.work-meta-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.work-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.work-tags span{border-radius:100px;background:#f4f4f5;color:#76767c;padding:6px 9px;font-size:10px}.work-open{color:var(--blue);font-weight:630;font-size:12px;white-space:nowrap}.work-meta .work-link{position:absolute;inset:0;z-index:3}.work-card{position:relative}.work-card .work-link:focus-visible{outline:3px solid #90c4ff;outline-offset:-4px;border-radius:22px}
.how-section{background:#f2f2f4;padding:98px 0 108px}.how-section .section-topline{margin-bottom:24px}.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}.how-item{background:#fff;border-radius:18px;padding:29px 28px 35px;min-height:210px}.how-index{color:#a8a8ae;font-size:12px;font-weight:650;letter-spacing:1px}.how-item h3{font-size:20px;font-weight:670;letter-spacing:-.6px;margin:28px 0 9px}.how-item p{margin:0;color:#86868d;font-size:13px;line-height:1.85}
.closing-section{padding-top:108px;padding-bottom:115px}.closing-card{min-height:300px;background:#1b1c22;border-radius:27px;color:#fff;padding:60px 65px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;overflow:hidden}.closing-card:after{content:"";pointer-events:none;position:absolute;width:360px;height:360px;border-radius:50%;border:1px solid rgba(255,255,255,.08);right:-160px;top:-170px}.closing-overline{font-size:10px;color:#a5a5b0;letter-spacing:2px;font-weight:730}.closing-card h2{font-size:36px;line-height:1.32;letter-spacing:-1.4px;font-weight:700;margin:19px 0 12px}.closing-card p{color:#afb0ba;font-size:13px;margin:0;line-height:1.8}.closing-card .button{position:relative;z-index:1;flex-shrink:0}
.site-footer{border-top:1px solid var(--border);padding:42px 0 50px}.footer-inner{display:flex;align-items:center;gap:35px;justify-content:space-between}.footer-brand{font-size:15px;font-weight:700;letter-spacing:-.6px}.footer-inner p{color:#92929a;font-size:12px;margin:9px 0 0}.footer-links{display:flex;gap:24px;font-size:12px;color:#626269}.footer-links button{color:inherit;border:0;background:transparent;padding:0}.footer-links a:hover,.footer-links button:hover{text-decoration:underline}.copyright{font-size:11px;color:#a0a0a7}
/* Gallery */
.gallery-intro{padding-top:105px;padding-bottom:70px}.gallery-intro h1{font-size:clamp(50px,6vw,76px);font-weight:730;line-height:1.15;letter-spacing:-4px;margin:0 0 22px}.gallery-intro>p:last-child{font-size:15px;line-height:1.95;color:#85858b;margin:0}.gallery-section{padding-bottom:130px}.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border);padding-bottom:23px}.filter-group{display:flex;gap:5px;flex-wrap:wrap}.filter{border:0;background:transparent;border-radius:100px;padding:10px 16px;font-size:13px;color:#75757b;white-space:nowrap;transition:color .15s,background .15s}.filter:hover{background:#eeeef0}.filter.active{background:#1d1d1f;color:white}.search-field{border:1px solid #e4e4e7;background:#fff;border-radius:50px;display:flex;align-items:center;gap:8px;color:#9c9ca3;padding:0 15px;height:42px;min-width:215px}.search-field:focus-within{outline:2px solid #91bcf0}.search-field input{width:100%;border:0;background:transparent;font-size:13px;outline:0;color:var(--ink)}.gallery-count{margin:23px 0 26px;color:#91919a;font-size:12px}.empty-state{text-align:center;padding:100px 20px;background:#f5f5f7;border-radius:20px;margin-top:25px}.empty-state h3{font-size:18px}.empty-state p{color:#888;font-size:13px}
/* Overlays */
.overlay{position:fixed;inset:0;background:rgba(17,18,22,.58);z-index:80;display:none;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.overlay.open{display:flex}.modal{border-radius:25px;background:#fff;width:min(100%,770px);max-height:min(92vh,920px);max-height:min(92dvh,920px);display:flex;flex-direction:column;box-shadow:0 25px 90px rgba(0,0,0,.22);overflow:hidden}.modal-small{max-width:495px}.modal-header{flex-shrink:0;border-bottom:1px solid #ededf0;padding:24px 30px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}.modal-eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#93939b;margin:0 0 8px}.modal-header h2{font-size:24px;letter-spacing:-.8px;margin:0;font-weight:700}.close-button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:#f0f0f2;color:#65656b;font-size:23px;line-height:1}.close-button:hover{background:#e4e4e8}.modal-scroll{padding:29px 30px 34px;overflow:auto;overscroll-behavior:contain}.experience-note{font-size:13px;color:#86868c;line-height:1.8;margin:0 0 22px}.ui-label{display:block;font-size:12px;color:#66666d;font-weight:620;margin-bottom:11px}.tool-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.tool-button{border:1px solid #dedee3;background:#fff;color:#29292d;border-radius:11px;padding:11px 15px;font-size:13px;font-weight:620;transition:background .2s}.tool-button:hover{background:#f6f6f7}.tool-button.primary{color:white;background:#1d1d1f;border-color:#1d1d1f}.tool-button.primary:hover{background:#37373c}.tool-button:disabled{opacity:.5}.tool-select{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 19px}.tool-select button{border-radius:100px;border:1px solid #e5e5e8;background:#fff;padding:9px 15px;font-size:12px;color:#66666b}.tool-select button.active{background:#242429;color:white;border-color:#242429}.panel-soft{background:#f5f5f7;border-radius:17px;padding:24px}.panel-soft h3{font-size:19px;margin:0 0 7px;font-weight:670}.panel-soft p{color:#83838a;font-size:12px;line-height:1.8;margin:0}.small-tip{font-size:11px;color:#96969d;line-height:1.75;margin:18px 0 0}.form-input{width:100%;height:45px;border-radius:11px;border:1px solid #e0e0e5;padding:0 15px;background:white;outline:none;font-size:14px}.form-input:focus{border-color:#72a8e3;box-shadow:0 0 0 3px #e6f0fd}
/* WeChat app */
.weapp-layout{display:grid;grid-template-columns:240px 1fr;gap:29px;align-items:center}.weapp-preview{background:linear-gradient(130deg,#292f3a,#151922);border-radius:19px;padding:27px;min-height:315px;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.weapp-preview .weapp-halo{width:115px;height:115px;border-radius:28px;background:#e9e0d5;display:grid;place-items:center;color:#71635b;font-size:53px;margin-bottom:20px}.weapp-preview h3{margin:0 0 9px;font-size:20px;letter-spacing:-.5px}.weapp-preview p{margin:0;color:#9fa6b4;font-size:11px;line-height:1.6}.weapp-content h3{font-size:24px;letter-spacing:-.7px;line-height:1.35;margin:0 0 13px}.weapp-content>p{font-size:13px;line-height:1.85;color:#85858b;margin:0 0 20px}.weapp-detail{padding:13px 0;border-top:1px solid #ebebed;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:#777}.weapp-detail strong{color:#333;font-weight:630}.qr-frame{border:1px dashed #d1d1d7;border-radius:13px;padding:21px;text-align:center;margin-top:20px;background:#fafafb}.qr-frame img{width:185px;height:185px;object-fit:contain;margin:0 auto 13px}.qr-frame .qr-placeholder{height:96px;display:grid;place-items:center;color:#9a9aa1;font-size:12px}.qr-frame p{font-size:12px;color:#85858b;margin:6px 0;line-height:1.7}.weapp-link{display:inline-flex;margin-top:16px;color:white;background:#1d1d1f;border-radius:100px;padding:12px 19px;font-size:12px;font-weight:650}
/* Palette */
.palette-output{border:1px solid #ededf0;border-radius:17px;padding:22px;margin:18px 0 0}.palette-output h3{font-size:20px;letter-spacing:-.5px;margin:0 0 5px}.palette-output p{font-size:12px;color:#999;margin:0 0 20px}.palette-strips{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.palette-strip{height:155px;border-radius:12px;border:0;position:relative;overflow:hidden;transition:transform .2s}.palette-strip:hover{transform:translateY(-3px)}.palette-strip span{position:absolute;bottom:0;left:0;right:0;color:#444;background:rgba(255,255,255,.86);font-size:11px;text-align:center;padding:10px 2px;font-weight:600}.palette-prompt{margin:20px 0 0;line-height:1.7;font-size:13px;color:#73737b}
/* Habit */
.habit-entry{display:flex;gap:9px}.habit-entry input{flex:1;min-width:0}.habit-list{display:grid;gap:9px;margin:18px 0}.habit-item{display:flex;align-items:center;gap:13px;border:1px solid #ececf0;background:#fff;border-radius:13px;padding:12px 13px}.habit-check{display:grid;place-items:center;width:27px;height:27px;border:1px solid #d3d3db;background:#fff;border-radius:8px;flex-shrink:0;font-size:17px;color:#9f9fa6}.habit-check.checked{background:#6f9f7e;border-color:#6f9f7e;color:white}.habit-item .habit-title{font-size:14px;flex:1;min-width:0;overflow-wrap:anywhere}.habit-item.done .habit-title{color:#aaa;text-decoration:line-through}.habit-delete{border:0;background:transparent;color:#96969a;font-size:22px;padding:0 5px;line-height:1.2}.habit-legend{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#777;margin:0 0 10px}.habit-bar{width:100%;height:7px;border-radius:10px;background:#e5e6e7;overflow:hidden}.habit-bar span{display:block;height:100%;border-radius:10px;background:#729b7e;transition:width .3s}.habit-week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:20px}.habit-day{border:1px solid #ebebef;background:white;border-radius:10px;padding:10px 2px;text-align:center}.habit-day b,.habit-day small{display:block;font-size:10px;color:#8e8e95;font-weight:600}.habit-day strong{display:block;font-size:13px;margin:7px 0}.habit-day i{display:block;width:8px;height:8px;border-radius:50%;background:#e3e3e7;margin:auto}.habit-day i.marked{background:#71a582}
/* Timer */
.timer-layout{text-align:center;padding:15px 0}.timer-mode{justify-content:center}.timer-ring{width:min(100%,295px);aspect-ratio:1;margin:16px auto 23px;display:grid;place-items:center;position:relative}.timer-ring svg{width:100%;height:100%;position:absolute;transform:rotate(-90deg)}.timer-ring .ring-track{stroke:#ededf0;stroke-width:7;fill:none}.timer-ring .ring-progress{stroke:#809b9f;stroke-width:7;stroke-linecap:round;fill:none;stroke-dasharray:283;transition:stroke-dashoffset .25s linear}.timer-time{font-size:clamp(57px,10vw,75px);letter-spacing:-3px;font-variant-numeric:tabular-nums;font-weight:560}.timer-caption{color:#9a9aa2;font-size:12px;letter-spacing:1.8px;margin-top:10px}.timer-actions{justify-content:center}.timer-status{font-size:12px;color:#85858c;margin:22px 0 0}
/* 2048 */
.game-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.game-score-group{display:flex;gap:9px}.game-score{background:#f1eeea;border-radius:11px;min-width:82px;text-align:center;padding:8px 13px}.game-score span{display:block;color:#999188;font-size:10px}.game-score strong{font-size:20px;font-weight:680;color:#66594b}.game-board{width:min(100%,388px);aspect-ratio:1;background:#b9ab9c;border-radius:15px;padding:12px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;margin:0 auto;touch-action:none;user-select:none}.tile{display:grid;place-items:center;border-radius:8px;background:rgba(238,228,218,.35);font-size:clamp(22px,4.4vw,32px);font-weight:720;color:#776e65;letter-spacing:-1px}.tile[data-number="2"]{background:#eee4da}.tile[data-number="4"]{background:#ede0c8}.tile[data-number="8"]{background:#f2b179;color:#fff}.tile[data-number="16"]{background:#f59563;color:#fff}.tile[data-number="32"]{background:#f67c5f;color:#fff}.tile[data-number="64"]{background:#f65e3b;color:#fff}.tile[data-number="128"],.tile[data-number="256"],.tile[data-number="512"],.tile[data-number="1024"],.tile[data-number="2048"]{background:#edcf72;color:#fff;font-size:clamp(16px,3vw,23px)}.game-help{font-size:12px;color:#89898e;text-align:center;margin:14px 0 9px}.game-message{text-align:center;font-size:13px;font-weight:650;color:#7d5e3c;min-height:19px}.touch-controls{display:none;justify-content:center;gap:6px;align-items:center;margin-top:13px}.touch-controls button{border:0;border-radius:10px;background:#ececf0;padding:12px 16px;color:#444;font-size:16px;min-width:48px}
/* Memory */
.memory-status{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:18px;color:#888;font-size:13px;flex-wrap:wrap}.memory-status strong{color:#343439}.memory-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:410px;margin:0 auto}.flip-card{height:88px;border:1px solid #e5e5e9;background:#e8e9ed;border-radius:14px;font-size:28px;display:grid;place-items:center;position:relative;transition:background .17s,transform .17s;cursor:pointer;color:#58606e}.flip-card:not(.revealed):not(.matched):hover{transform:translateY(-2px);background:#dcdfe5}.flip-card.revealed,.flip-card.matched{background:#fff;border-color:#b7c6ca}.flip-card.matched{background:#e7eee8;border-color:#bdd6c3}.flip-card .back-mark{width:22px;height:22px;border:2px solid #bfc1cc;border-radius:7px;transform:rotate(45deg)}.memory-done{text-align:center;color:#518663;font-weight:620;margin-top:17px;font-size:13px;min-height:18px}
/* Contact */
.contact-lead{font-size:14px;color:#777780;line-height:1.8;margin:0 0 20px}.contact-info{background:#f5f5f7;border-radius:16px;padding:23px;text-align:center}.contact-info>span{font-size:12px;color:#888891}.contact-info strong{display:block;font-size:29px;letter-spacing:.4px;margin:10px 0 20px}.qr-area{margin-top:17px;border:1px dashed #dedee3;border-radius:15px;padding:18px;text-align:center;color:#a0a0a6;font-size:12px}.qr-area img{height:160px;width:160px;object-fit:contain;margin:auto}.qr-area small{display:block;font-size:11px;margin-top:10px;line-height:1.7}.fineprint{color:#9c9ca3;font-size:11px;line-height:1.8;margin:15px 0 0}
.toast{position:fixed;z-index:100;bottom:32px;left:50%;transform:translate(-50%,12px);border-radius:100px;background:#28282e;color:#fff;padding:11px 21px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}
/* Responsive */
@media(max-width:1000px){.hero{gap:4%}.hero h1{font-size:clamp(47px,6.2vw,68px)}.hero-visual{height:395px}.browser-inside{padding:27px 25px}.mock-swatches{height:96px}.hero-chiplike{bottom:-1px}.work-cover{height:250px}}
@media(max-width:760px){.container{width:min(calc(100% - 36px),var(--container))}.site-header{height:59px}.brand{font-size:15px;gap:8px}.brand-icon{width:28px;height:28px}.main-nav{gap:17px;margin:0 0 0 auto}.main-nav a{font-size:12px}.nav-shell{gap:12px}.nav-contact{padding:8px 12px;font-size:11px}.nav-contact span{display:none}.hero{grid-template-columns:1fr;gap:20px;padding-top:70px;padding-bottom:44px;min-height:0}.hero h1{font-size:clamp(52px,10vw,74px);letter-spacing:-3px}.hero-lead{margin-top:22px;font-size:15px;max-width:560px}.hero-visual{height:410px;max-width:540px;width:100%;margin-inline:auto}.feature-divider{font-size:11px;padding:20px 0}.section{padding:78px 0 86px}.section-heading{align-items:flex-start;flex-direction:column;gap:16px}.section-heading h2,.how-section h2{font-size:40px}.section-heading p{max-width:none}.works-grid{gap:15px}.work-cover{height:215px}.work-meta{padding:18px 18px 21px}.work-meta h3{font-size:17px}.work-meta p{font-size:12px;margin:9px 0 16px}.work-tags span{padding:5px 8px}.how-section{padding:75px 0 85px}.how-grid{gap:12px}.how-item{padding:22px 18px}.how-item h3{font-size:17px}.closing-section{padding:78px 0}.closing-card{padding:40px 36px}.closing-card h2{font-size:30px}.gallery-intro{padding:76px 0 50px}.gallery-intro h1{font-size:60px}.gallery-controls{flex-direction:column;align-items:stretch}.search-field{width:100%}.filter-group{justify-content:flex-start}.gallery-section{padding-bottom:85px}.footer-inner{flex-wrap:wrap}.modal-scroll{padding:25px 23px}.modal-header{padding:21px 23px 18px}}
@media(max-width:560px){.container{width:min(calc(100% - 34px),var(--container))}.brand{font-size:13px}.main-nav{gap:14px}.main-nav a{font-size:11px}.nav-contact{font-size:10px;padding:8px 10px}.nav-shell{gap:8px}.hero{padding-top:59px;gap:24px}.hero h1{font-size:clamp(47px,11vw,61px);letter-spacing:-2.8px}.hero-lead{font-size:14px;line-height:1.85}.eyebrow{font-size:9px;margin-bottom:22px;letter-spacing:1.2px}.hero-buttons .button{padding:13px 17px;font-size:13px}.hero-caption{font-size:11px}.hero-visual{height:295px}.hero-backdrop{inset:22px 5px 15px 14px;border-radius:25px}.browser-mockup{border-radius:13px;width:89%}.browser-toolbar{height:32px;padding:0 12px;font-size:8px}.window-dots i{width:5px;height:5px}.browser-inside{padding:17px 17px 15px}.mock-label{font-size:8px;margin-bottom:8px}.browser-inside h2{font-size:23px}.mock-sub{font-size:10px;margin-bottom:15px}.mock-swatches{height:66px;gap:4px}.mock-swatches span{border-radius:5px}.mock-foot{margin-top:14px;padding-top:10px;font-size:8px}.hero-chiplike{bottom:3px;padding:9px 11px;font-size:9px}.feature-divider{flex-wrap:wrap;justify-content:flex-start;column-gap:15px;row-gap:7px;font-size:10px}.feature-divider span{white-space:nowrap}.section{padding-top:75px;padding-bottom:79px}.section-heading h2,.how-section h2{font-size:35px;letter-spacing:-1.5px}.section-heading{margin-bottom:23px}.section-heading p{font-size:12px}.works-grid{grid-template-columns:1fr;gap:19px}.work-cover{height:265px}.work-meta{padding:21px}.work-meta h3{font-size:18px}.work-meta p{min-height:0}.mini-game-board{grid-template-columns:repeat(4,44px)}.how-section{padding:68px 0}.how-grid{grid-template-columns:1fr;margin-top:27px}.how-item{min-height:0;padding:24px}.how-item h3{margin:19px 0 7px}.closing-section{padding:65px 0}.closing-card{display:block;padding:37px 26px;min-height:0;border-radius:21px}.closing-card h2{font-size:29px;margin:16px 0 12px}.closing-card p{font-size:12px}.closing-card button{margin-top:25px}.site-footer{padding:32px 0}.footer-inner{display:grid;grid-template-columns:1fr;gap:22px}.footer-links{gap:22px}.gallery-intro{padding:68px 0 43px}.gallery-intro h1{font-size:49px;letter-spacing:-2.5px}.gallery-intro>p:last-child{font-size:13px}.gallery-intro>p:last-child br{display:none}.gallery-controls{gap:18px}.filter-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin-right:-17px}.filter-group::-webkit-scrollbar{display:none}.filter{padding:9px 13px;font-size:12px}.gallery-section{padding-bottom:70px}.overlay{padding:10px;align-items:flex-end}.modal{max-height:93vh;max-height:93dvh;width:100%;border-radius:19px}.modal-header{padding:18px 19px 15px}.modal-header h2{font-size:20px}.modal-scroll{padding:19px 18px 25px}.weapp-layout{grid-template-columns:1fr;gap:18px}.weapp-preview{min-height:165px;padding:15px;display:grid;grid-template-columns:85px 1fr;grid-template-rows:repeat(2,auto);column-gap:12px;text-align:left}.weapp-preview .weapp-halo{grid-row:1/3;width:82px;height:82px;border-radius:17px;margin:0;font-size:36px}.weapp-preview h3{font-size:19px;align-self:end}.weapp-preview p{align-self:start}.weapp-content h3{font-size:20px}.palette-output{padding:17px}.palette-strips{gap:5px}.palette-strip{height:119px;border-radius:8px}.palette-strip span{font-size:9px;padding:8px 0}.habit-week{gap:4px}.habit-day{padding:8px 1px}.habit-day strong{font-size:12px}.tool-button{font-size:12px}.memory-grid{gap:7px}.flip-card{height:68px}.game-board{width:min(100%,315px);gap:7px;padding:9px}.tile{border-radius:6px}.touch-controls{display:flex}.contact-info strong{font-size:26px}}
@media(max-width:350px){.brand{font-size:12px}.nav-contact{padding:8px 7px}.main-nav{gap:11px}.hero h1{font-size:45px}.work-cover{height:230px}.feature-divider{font-size:10px}.gallery-intro h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Make the entire project card a genuinely clickable surface. */
.work-card>.work-link{position:absolute;inset:0;display:block;z-index:3}

/* ──────────────────────────────────────────────────────────────
   V3 · A little more color, a lot of breathing room.
   White / ink remain the main palette; accents stay intentional.
   Change only the --accent-* tokens to tune the whole showroom.
   ────────────────────────────────────────────────────────────── */
:root {
  --bg: #fcfbff;
  --soft: #f7f6fb;
  --ink: #24232c;
  --muted: #777581;
  --border: #eae8f0;
  --blue: #6653ee;
  --bluehover: #503bcf;
  --accent-purple: #7560ff;
  --accent-coral: #ff797e;
  --accent-mint: #61d3bb;
  --accent-gold: #ffce77;
}
body { background: var(--bg); }
::selection { background: #dbd4ff; color:#29223c; }
.site-header { background: rgba(252,251,255,.88); }
.brand-icon { background:#262332; box-shadow:0 5px 13px rgba(67,48,103,.13); }
.brand-icon span:nth-child(1) { background:#a38dff; }
.brand-icon span:nth-child(2) { background:#ff8d93; }
.brand-icon span:nth-child(3) { background:#6bdac2; }
.brand-icon span:nth-child(4) { background:#ffcf75; }
.main-nav a.active:after { background:linear-gradient(90deg,#735cff,#ff8c96); height:3px; border-radius:3px 3px 0 0; }
.nav-contact { border-color:#ddd6ff; color:#5d4ada; background:#f8f6ff; }
.nav-contact:hover { border-color:#b4a6ff; background:#f1edff; }
.nav-contact span { color:#7861f5; }
.eyebrow { color:#77708f; }
.eyebrow-line { width:28px; height:3px; border-radius:5px; background:linear-gradient(90deg,#7e64ff,#ff929e); }
.hero h1 span { background:linear-gradient(102deg,#6555ef 10%,#9466f4 52%,#fa7e9b 100%); color:#7158ec; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-lead { color:#72717e; }
.button-dark { background:linear-gradient(112deg,#7560ff,#6250e7); box-shadow:0 10px 24px rgba(102,83,238,.19); }
.button-dark:hover { background:linear-gradient(112deg,#6753f4,#513ccf); box-shadow:0 14px 30px rgba(102,83,238,.23); }
.button-outline { border-color:#ddd8ee; background:#fff; }
.button-outline:hover { background:#f7f4ff; border-color:#b9abfa; }
.status-dot { background:#41bfa0; box-shadow:0 0 0 4px rgba(65,191,160,.13); }
.hero-backdrop {
  background:radial-gradient(circle at 12% 22%,rgba(169,139,255,.55),transparent 43%),
             radial-gradient(circle at 86% 80%,rgba(255,178,154,.50),transparent 40%),
             linear-gradient(145deg,#eff0ff,#effbf6);
}
.browser-mockup { box-shadow:0 32px 70px rgba(81,62,124,.16); }
.mock-label { color:#8565db; }
.mock-swatches span:nth-child(1) {background:#ff9b90}
.mock-swatches span:nth-child(2) {background:#ffcf83}
.mock-swatches span:nth-child(3) {background:#a4dac1}
.mock-swatches span:nth-child(4) {background:#8e98ed}
.mock-swatches span:nth-child(5) {background:#cbb0ef}
.hero-chiplike { border-color:#efe9fa; box-shadow:0 14px 30px rgba(94,72,133,.1); }
.section-topline { color:#8c839f; }
.section-topline .inline-link { color:var(--blue); }
.work-card { border-color:#eeebf3; box-shadow:0 5px 20px rgba(68,42,92,.025); }
.work-card:hover { border-color:#d8d0f8; box-shadow:0 19px 52px rgba(89,72,142,.11); }
.work-cover.flagship {background:radial-gradient(circle at 82% 27%,#57518d 0%,transparent 58%), linear-gradient(145deg,#29253d,#171c2b)}
.work-cover.palette {background:linear-gradient(135deg,#f0e7ff 0%,#ffe8db 100%)}
.work-cover.habit {background:linear-gradient(132deg,#e3faed,#ddf5f3)}
.work-cover.timer {background:linear-gradient(130deg,#e3eaff,#e3f4ff)}
.work-cover.game2048 {background:linear-gradient(140deg,#fff2da,#ffe4df)}
.work-cover.memory {background:linear-gradient(138deg,#f0e7ff,#e5eaff)}
.work-cover.choice {background:linear-gradient(135deg,#ffe8d8,#ffe6ed)}
.work-cover.drawing {background:linear-gradient(140deg,#e2f9e7,#e7edff)}
.work-cover.choice::before,.work-cover.drawing::before {content:'';position:absolute;width:210px;height:210px;border-radius:50%;filter:blur(35px);background:rgba(255,255,255,.50);top:-110px;right:-60px}
.work-tags span { background:#f7f5ff; color:#776f96; }
.work-open { color:#6b53ed; }
.cover-badge { border-color:rgba(91,72,140,.075); }
.habit-mark { background:#5fc6a3; }
.timer-dial { border-color:#afc1ff; }
.mini-flip-board i.on { background:#9076d8; }
.how-section { background:linear-gradient(165deg,#f6f3ff 0%,#f7f9ff 60%,#f6fbf8 100%); }
.how-item { border:1px solid #efeaf8; box-shadow:0 9px 22px rgba(65,46,107,.035); }
.how-index {color:#8166e9;}
.closing-card { background:linear-gradient(116deg,#242038 0%,#2c2449 58%,#3d2b59 100%); }
.closing-card::before { content:''; position:absolute; width:350px; height:350px; border-radius:50%; right:70px; bottom:-270px; background:radial-gradient(circle,#8b67ff 0%,rgba(139,103,255,0) 72%); opacity:.38; pointer-events:none; }
.closing-overline {color:#b7a9ff;}
.site-footer {background:#fff;}
.filter.active,.tool-select button.active {background:#6e56ed;border-color:#6e56ed;color:white;}
.filter:hover { background:#f1edff; }
.search-field:focus-within {outline-color:#bdadff;}
.tool-button.primary {background:#7057ef;border-color:#7057ef;}
.tool-button.primary:hover {background:#5a43d6;border-color:#5a43d6;}
.tool-select button.active:hover {background:#624ce0;}
.weapp-link {background:#6a53e8;}
.timer-ring .ring-progress {stroke:#8268ef;}
.palette-strip:hover {box-shadow:0 12px 25px rgba(100,67,143,.12);}

/* Independent, permissively-licensed demo previews */
.choice-preview { width:min(77%,340px); min-height:197px; padding:26px 22px; border:1px solid rgba(255,255,255,.85); border-radius:19px; background:rgba(255,255,255,.88); box-shadow:0 18px 35px rgba(143,77,108,.12); transform:rotate(-4deg); }
.choice-preview small {color:#9989a2;font-size:9px;letter-spacing:1.35px;font-weight:750;}
.choice-chips {display:flex;gap:8px;flex-wrap:wrap;margin:17px 0 15px;}
.choice-chips span {border-radius:100px;padding:9px 12px;font-size:11px;font-weight:620;background:#f3f1fa;color:#796d8d;}
.choice-chips .picked {background:#735bf1;color:white;box-shadow:0 5px 12px rgba(109,80,239,.23);}
.choice-preview strong {font-size:13px;color:#6a507c;letter-spacing:-.3px;}
.drawing-preview {width:290px;height:215px;background:#fff;border:1px solid #fff;border-radius:14px;position:relative;box-shadow:0 17px 40px rgba(63,100,110,.13);transform:rotate(4deg);overflow:hidden;}
.drawing-preview::before {content:'';position:absolute;top:31px;left:26px;width:32px;height:32px;border:6px solid #ffd77e;border-radius:50%;}
.drawing-preview .doodle-sun {position:absolute;right:34px;top:22px;color:#fc9aa5;font-size:54px;transform:rotate(-15deg);}
.doodle-stroke {position:absolute;width:162px;height:75px;border:9px solid #8e83ff;border-bottom:0;border-right:0;border-radius:60% 25% 0 0;transform:rotate(-16deg);left:37px;top:95px;}
.doodle-stroke.two {border-color:#66cbb1;top:107px;left:86px;transform:rotate(21deg);width:119px;height:55px;}
.drawing-preview>span {position:absolute;left:32px;top:70px;font-size:17px;font-weight:750;line-height:1.14;letter-spacing:-.5px;color:#6552c7;transform:rotate(-8deg);}
.doodle-toolbar {position:absolute;bottom:0;left:0;right:0;height:35px;background:#faf9ff;border-top:1px solid #f1edf8;display:flex;align-items:center;justify-content:center;gap:11px;}
.doodle-toolbar i {display:block;width:15px;height:15px;border-radius:50%;background:#8d75ef;}
.doodle-toolbar i:nth-child(2){background:#ff958c}.doodle-toolbar i:nth-child(3){background:#ffd46c}.doodle-toolbar i:nth-child(4){background:#75d6b6}
.imported-intro {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 15px;}
.imported-intro p {font-size:12px;line-height:1.7;color:#81808b;margin:0;}
.imported-intro a {font-size:12px;font-weight:650;white-space:nowrap;color:var(--blue);}
.imported-intro a:hover,.opensource-credit a:hover{text-decoration:underline;}
.imported-frame {width:100%;height:540px;border:1px solid #ece8f5;background:#faf9ff;border-radius:17px;display:block;}
.opensource-credit {color:#93909f;font-size:11px;line-height:1.8;margin:16px 0 0;}
.opensource-credit a {color:#6550dd;}
@media(max-width:760px){.imported-frame{height:500px}.choice-preview{min-height:178px}}
@media(max-width:560px){.choice-preview{width:82%;padding:23px 18px}.drawing-preview{width:255px;height:205px}.imported-intro{display:block}.imported-intro a{display:inline-flex;margin-top:7px}.imported-frame{height:430px;border-radius:12px}}
.filter.active:hover { background:#6249df;color:#fff; }

/* V4 — content-creator covers with restrained bright accents */
.work-cover.cover {background:radial-gradient(circle at 90% 6%,#ffd2d6,transparent 35%),linear-gradient(132deg,#f1e8ff,#ffe6d8)}
.work-cover.grid {background:radial-gradient(circle at 18% 8%,#dbf7d7,transparent 36%),linear-gradient(136deg,#e5eafc,#f9e8ed)}
.cover-preview {position:relative;background:#fff5ea;border:8px solid #fffaf7;border-radius:16px;padding:30px 29px 20px;width:229px;height:246px;box-shadow:0 18px 41px rgba(88,58,133,.16);transform:rotate(-5deg);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;}
.cover-preview::after {content:'';position:absolute;width:164px;height:164px;border-radius:50%;background:#f9bbcc;right:-72px;top:-45px;z-index:0;}
.cover-preview-badge {font-size:8px;letter-spacing:.8px;color:#9c7187;position:relative;z-index:1;font-weight:780;}
.cover-preview-heart {position:absolute;right:20px;top:51px;color:#fa8c93;font-size:31px;z-index:1;}
.cover-preview h4 {font-weight:800;font-size:29px;letter-spacing:-1.7px;line-height:1.26;margin:31px 0 12px;color:#292038;position:relative;z-index:1;}
.cover-preview h4 em {font-style:normal;color:#7b55f2;}
.cover-preview p {font-size:10px;color:#948390;margin:0;}
.cover-preview-foot {border-top:1px solid #e9dcd4;padding-top:13px;margin-top:auto;font-size:8px;color:#89778d;font-weight:700;}
.cover-preview-foot i {display:inline-block;height:6px;width:20px;background:#7552ea;border-radius:6px;margin-right:5px;}
.grid-preview {position:relative;height:227px;width:227px;background:#fff;border:8px solid #fff;border-radius:18px;box-shadow:0 17px 40px rgba(78,68,104,.16);transform:rotate(4deg);overflow:hidden;}
.grid-preview-art {height:100%;width:100%;display:flex;flex-direction:column;padding:29px 24px 14px;background:linear-gradient(140deg,#adf0df 0%,#cecfef 57%,#f5c7c5 100%);}
.grid-preview-art span {font-weight:800;font-size:22px;letter-spacing:-1px;color:#6354a8;}
.grid-preview-art b {margin-top:22px;font-weight:850;font-size:36px;line-height:1.04;color:#fff;text-shadow:0 4px 0 rgba(93,79,155,.1);letter-spacing:-1.6px;}
.grid-preview-art>i {font-style:normal;font-size:52px;position:absolute;right:15px;top:25px;color:#ffdd7f;}
.grid-lines {position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 32.8%,white 32.8%,white 34%,transparent 34%,transparent 65.8%,white 65.8%,white 67%,transparent 67%),linear-gradient(0deg,transparent 32.8%,white 32.8%,white 34%,transparent 34%,transparent 65.8%,white 65.8%,white 67%,transparent 67%);}
.grid-preview-note {position:absolute;right:8px;bottom:8px;background:rgba(255,255,255,.88);color:#7365a9;font-size:9px;font-weight:700;padding:5px 9px;border-radius:100px;}
.imported-frame {height:min(74vh,680px);min-height:535px;}
@media(max-width:560px){.imported-frame{height:72vh;min-height:410px}.cover-preview{transform:rotate(-4deg) scale(.92)}.grid-preview{transform:rotate(3deg) scale(.95)}}