@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--accent:#5b5ce2;--ink:#171926;--muted:#687087;--line:#e7e9f0;--paper:#fff;--bg:#f8f9fc;--soft:#f0f1fc;--radius:17px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 'DM Sans',system-ui,-apple-system,sans-serif}h1,h2,h3,h4{font-family:Outfit,'DM Sans',system-ui,sans-serif;line-height:1.14;letter-spacing:-.025em;margin:0 0 .6em}h1{font-size:clamp(2.7rem,6vw,5rem)}h2{font-size:clamp(1.8rem,3vw,2.5rem)}h3{font-size:1.4rem}p{margin:0 0 1.2em}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,textarea,select{font:inherit}button{cursor:pointer}.wrap{max-width:1140px;margin:auto;padding:0 26px}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:white;z-index:999;padding:10px}.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}.nav{min-height:79px;display:flex;gap:24px;align-items:center;justify-content:space-between}.brand{font:700 1.25rem Outfit,sans-serif;letter-spacing:-.03em;color:var(--ink)}.brand:hover{text-decoration:none}.nav nav{display:flex;align-items:center;gap:24px}.nav nav a{font-size:.9rem;font-weight:700;color:#3c4356}.nav nav a:hover{color:var(--accent)}.nav-admin{background:var(--soft);color:var(--accent)!important;padding:9px 14px;border-radius:10px}.muted-nav{color:var(--muted)!important}.menu-button{display:none;border:1px solid var(--line);background:white;border-radius:10px;padding:8px 12px}.notice{padding:13px 18px;margin-top:19px;background:#ecfdf4;color:#086b43;border:1px solid #bcf2d3;border-radius:12px}.error{background:#fff0ef;color:#a42020;padding:12px;border-radius:10px;margin:12px 0}.hero{min-height:490px;padding:88px 0;display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center}.hero h1{max-width:730px}.hero p{max-width:580px;font-size:1.17rem;color:var(--muted)}.eyebrow{text-transform:uppercase;color:var(--accent);font-size:.77rem;letter-spacing:.14em;font-weight:800}.hero-actions,.quick-actions,.lab-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.btn{background:var(--accent);color:white;border:1px solid var(--accent);padding:13px 20px;font-weight:700;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.25;transition:transform .16s}.btn:hover{text-decoration:none;transform:translateY(-1px);filter:brightness(.95)}.btn-outline{color:var(--accent);background:white;border:1px solid #cecef4}.btn-small{padding:8px 12px;font-size:.81rem}.hero-art{height:330px;background:linear-gradient(150deg,#e0dcff,#f1e7fc 45%,#e4f3fd);border-radius:40px;position:relative;transform:rotate(2deg);overflow:hidden}.hero-art span{position:absolute;font-size:9rem;color:#7671dd;opacity:.6}.hero-art span:nth-child(1){top:25px;left:50px}.hero-art span:nth-child(2){top:100px;right:25px;color:#eea3c4}.hero-art span:nth-child(3){bottom:-120px;left:90px;color:#6eafda;font-size:15rem}.section{padding:32px 0 78px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:0 0 26px}.section-heading h2{margin:4px 0 0}.section-heading>a{font-weight:700}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}.work-card{display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);background:#fff;transition:transform .2s,box-shadow .2s}.work-card:hover{text-decoration:none;transform:translateY(-4px);box-shadow:0 14px 35px #262a4614}.card-cover{width:100%;height:210px;object-fit:cover;display:block}.card-placeholder{display:grid;place-items:center;background:linear-gradient(130deg,#e8e8ff,#f9e7f0);color:#a4a0e4;font-size:6rem}.card-body{padding:23px}.card-body .eyebrow{font-size:.67rem}.card-body h3{margin:12px 0}.card-body p{color:var(--muted);font-size:.92rem;min-height:60px}.read-more{color:var(--accent);font-weight:800;font-size:.91rem}.page-head{padding:65px 0 45px;max-width:900px}.page-head h1{margin:9px 0 15px}.page-head p{color:var(--muted);font-size:1.1rem}.small-head{padding:43px 0 28px}.small-head h1{font-size:2.8rem}.empty{padding:60px;background:var(--bg);border:1px dashed #d2d7e4;border-radius:15px;color:var(--muted);grid-column:1/-1}.footer{margin-top:70px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}.footer-inner{min-height:95px;display:flex;justify-content:space-between;align-items:center;gap:16px}.article{max-width:780px;margin:40px auto 90px}.back-link{font-weight:700;font-size:.9rem}.article-head{padding:38px 0 25px}.article h1{font-size:clamp(2.6rem,5vw,4.6rem)}.tagline{color:var(--muted)}.article-cover{width:100%;border-radius:17px;max-height:470px;object-fit:cover;margin-bottom:30px}.prose{font-size:1.09rem;line-height:1.85}.prose h1{font-size:2.2rem}.prose h2{font-size:1.75rem;margin:1.4em 0 .5em}.prose h3{font-size:1.4rem;margin:1.3em 0 .5em}.prose p{margin:0 0 1.15em}.prose img{max-width:100%;height:auto;border-radius:12px}.prose a{text-decoration:underline}.prose code,.editor-help code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#f0f1f7;padding:2px 5px;border-radius:5px;font-size:.88em}.about-copy{max-width:790px;min-height:250px}.share-row{display:flex;gap:13px;align-items:center;margin-top:60px;padding-top:20px;border-top:1px solid var(--line)}.share-row span{margin-right:auto;color:var(--muted)}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.gallery-grid a{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden}.gallery-grid img{width:100%;height:240px;object-fit:cover}.gallery-grid span{display:block;padding:10px 14px;color:var(--ink);font-size:.85rem}.auth-card{max-width:470px;margin:70px auto 100px;padding:34px;border-radius:20px;border:1px solid var(--line);box-shadow:0 14px 50px #2022390b}.auth-card h1{font-size:2.6rem}.auth-card p{color:var(--muted)}label{display:block;font-weight:700;font-size:.9rem;margin-bottom:18px}input:not([type=hidden]):not([type=checkbox]):not([type=color]):not([type=file]),textarea,select{display:block;width:100%;margin-top:7px;border:1px solid #cfd4e2;background:#fff;border-radius:10px;padding:12px 13px;color:var(--ink);outline-color:var(--accent)}textarea{resize:vertical;line-height:1.5}input[type=file]{display:block;margin-top:7px;font-size:.85rem;max-width:100%}input[type=color]{display:block;width:100px;height:46px;margin-top:8px;padding:3px;border-radius:9px;border:1px solid var(--line)}.contact-card{margin:0 0 70px;max-width:620px}.honeypot{position:absolute;left:-99999px}.search-line{display:flex;gap:12px;max-width:550px}.search-line input{margin:0!important}.studio-bar{margin-top:23px;border-radius:15px;background:#f5f5fc;border:1px solid #e3e4f5;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px}.studio-links{display:flex;flex-wrap:wrap;gap:3px}.studio-links a{font-weight:700;color:#535a70;font-size:.8rem;padding:8px 11px;border-radius:8px}.studio-links a.current{background:var(--accent);color:#fff}.studio-bar form{margin:0}.logout{border:0;background:transparent;color:#9a3540;font-weight:700;white-space:nowrap;font-size:.81rem}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:25px}.stats>div{padding:25px;background:var(--bg);border:1px solid var(--line);border-radius:14px}.stats strong{display:block;font:700 2.6rem Outfit}.stats span{color:var(--muted);font-size:.86rem}.quick-actions{margin:20px 0 35px}.admin-list{border:1px solid var(--line);border-radius:14px;overflow:hidden}.admin-list>a,.user-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 20px;color:var(--ink);border-bottom:1px solid var(--line)}.admin-list>a:last-child,.user-row:last-child{border:0}.admin-list a:hover{background:var(--bg);text-decoration:none}.admin-list strong{display:block}.admin-list small{display:block;color:var(--muted);font-size:.8rem}.pill{padding:5px 11px;background:#edf1fa;color:#53617f;border-radius:30px;text-transform:capitalize;font-size:.75rem;font-weight:700}.pill.published{background:#e4f8e9;color:#207844}.pill.draft{background:#fff2da;color:#98692e}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:28px}.editor-form textarea{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92rem}.editor-sidebar{background:var(--bg);border:1px solid var(--line);padding:23px;border-radius:16px;height:max-content}.editor-sidebar .btn{display:flex;width:100%;margin-bottom:10px}.editor-help{padding:15px 17px;background:var(--soft);border-radius:13px;color:#4f5470;font-size:.8rem;margin:0 0 26px}.editor-help p{margin:8px 0}.danger-zone{margin-top:24px}.danger-button{color:#b13c45;border:0;background:transparent;font-weight:700;font-size:.84rem;padding:6px 0}.upload-row{display:flex;align-items:end;flex-wrap:wrap;gap:16px;border:1px solid var(--line);padding:20px;border-radius:13px;margin-bottom:26px}.upload-row label{margin:0;flex:1}.media-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.media-card{border:1px solid var(--line);padding:12px;border-radius:12px;display:flex;flex-direction:column;align-items:stretch;gap:8px}.media-card img,.pdf-icon{width:100%;height:142px;object-fit:cover;border-radius:8px}.pdf-icon{display:grid;place-items:center;background:#f8efec;color:#b15439;font-weight:800}.media-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}.media-card form{margin:0}.lab-note{padding:12px 16px;background:#eef6fe;border-radius:11px;border:1px solid #d4e4f5;color:#375a7a;font-size:.9rem;margin-bottom:18px}.lab-toolbar{margin-bottom:18px}.lab-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.lab-editors{display:grid;grid-template-columns:1fr;gap:5px}.lab-editors label{margin:0}.lab-editors textarea{font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;background:#161b29;color:#e5ebff;border-color:#30364c;tab-size:2}.lab-preview{border:1px solid var(--line);border-radius:15px;padding:16px;height:max-content;position:sticky;top:100px}.lab-preview h3{font-size:1rem}.lab-preview iframe{width:100%;height:550px;border:1px solid var(--line);background:white;border-radius:9px}.hint{font-size:.8rem;color:var(--muted)}.lab-footer{background:var(--bg);padding:21px;border-radius:15px;margin-top:22px}.lab-footer p{color:var(--muted)}.settings-form{max-width:690px;margin:0 0 60px}.message-card{max-width:750px;background:var(--bg);padding:20px;border:1px solid var(--line);border-radius:12px;margin-bottom:16px}.message-card p{white-space:normal;margin:10px 0}.message-header{display:flex;gap:20px;justify-content:space-between}.message-header span{color:var(--muted);font-size:.85rem}@media(max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr)}.media-grid{grid-template-columns:repeat(3,1fr)}.nav nav{gap:12px}}@media(max-width:760px){.wrap{padding:0 18px}.nav{min-height:64px;flex-wrap:wrap}.menu-button{display:block}.nav nav{display:none;width:100%;padding-bottom:13px;flex-direction:column;align-items:stretch;gap:0}.nav nav.open{display:flex}.nav nav a{padding:9px 3px}.hero{grid-template-columns:1fr;padding:58px 0 25px;min-height:auto}.hero-art{height:165px}.hero-art span{font-size:6rem}.card-grid,.gallery-grid{grid-template-columns:1fr}.card-cover{height:250px}.page-head{padding:45px 0 27px}.editor-grid,.lab-layout{grid-template-columns:1fr}.lab-preview{position:static}.media-grid{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.studio-bar{align-items:start}.studio-links{flex:1}.section{padding:30px 0}.footer-inner{flex-direction:column;justify-content:center;padding:20px 18px;text-align:center}.auth-card{margin:40px auto;padding:22px}.small-head h1{font-size:2.2rem}}@media(max-width:400px){.media-grid{grid-template-columns:1fr}.stats>div{padding:15px}.hero h1{font-size:2.5rem}.share-row{flex-wrap:wrap}.share-row span{width:100%}}

.format-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:-12px 0 9px}.format-toolbar button{background:#f6f5ff;color:#5554b5;border:1px solid #dfdef6;border-radius:7px;padding:6px 11px;font-size:.81rem;font-weight:700}.format-toolbar button:hover{background:#e9e7ff}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* App Studio */
.app-notice{background:var(--surface,#f4f4ff);border:1px solid #d9d8f3;border-radius:13px;padding:16px 20px;line-height:1.6;margin:14px 0 24px;color:var(--text,#202139)}
.app-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:22px;margin:26px 0}
.app-panel{padding:24px;border:1px solid #e0e2eb;border-radius:16px;min-width:0;background:#fff}.app-panel h2{margin-top:0}.app-panel ol{padding-left:25px;line-height:2}
.app-row{display:flex;gap:18px;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #e7e8ee}.app-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0}.app-actions form{margin:0}.app-actions button{white-space:nowrap}.app-show-frame{display:block;width:100%;min-height:520px;border:1px solid #d6d8e2;border-radius:14px;background:white}.app-list{padding:0 12px}
@media(max-width:760px){.app-layout{grid-template-columns:1fr}.app-row{align-items:flex-start;flex-direction:column}.app-show-frame{min-height:450px}}

/* v2.1: Mobile app canvas fills the available viewport width and height. */
.app-show-frame{max-width:100%;width:100%;height:min(78dvh,900px);min-height:560px;display:block;box-sizing:border-box}
@media(max-width:760px){
 .app-show-frame{height:82dvh;min-height:570px;border-radius:8px}
 .app-actions .btn{min-height:44px}
 .article .app-show-frame{width:calc(100% + 36px);max-width:none;margin-left:-18px;border-left:0;border-right:0;border-radius:0}
}

/* v2.2: reusable media across projects, articles, apps, and site identity */
.gallery-image-preview{min-height:44px;display:flex;align-items:center;justify-content:center;background:#f0f1f8;border-radius:10px;color:#697086;font-size:.83rem;margin:-6px 0 12px;overflow:hidden}
.gallery-image-preview img{max-height:180px;max-width:100%;width:auto;object-fit:contain;border-radius:8px}
.hero-art.hero-photo{display:block;width:100%;object-fit:cover;transform:none}
.about-photo{width:min(100%,480px);max-height:360px;object-fit:cover;border-radius:18px;display:block;margin:0 0 25px}
.app-feature-image{display:block;width:100%;max-height:380px;object-fit:cover;border-radius:15px;margin:0 0 25px}
.advanced-image{margin-bottom:15px}.advanced-image summary{cursor:pointer;font-size:.85rem;color:#616783;margin-bottom:10px}
@media(max-width:760px){.hero-art.hero-photo{height:230px}.app-feature-image{max-height:260px}}