:root {
  --ink: #1d1d1f;
  --ink-2: #505052;
  --quiet: #777775;
  --paper: #f6f4ef;
  --surface: #fff;
  --line: rgba(29,29,31,.11);
  --line-strong: rgba(29,29,31,.2);
  --accent: #dd583d;
  --accent-dark: #bd412a;
  --sage: #a7b9a2;
  --blue: #567483;
  --radius: 22px;
  --shadow: 0 20px 60px rgba(40,39,36,.10), 0 2px 8px rgba(40,39,36,.05);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; background: var(--paper) }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
button, input, select { font: inherit }
button { color: inherit }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(29,29,31,.06); background: rgba(246,244,239,.82); backdrop-filter: blur(24px) saturate(1.3) }
.nav-inner { height: 68px; display: flex; align-items: center; gap: 44px }
.brand,.auth-brand { display: inline-flex; align-items: center; gap: 10px; letter-spacing: -.02em }
.brand-mark { width: 27px; height: 27px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; flex: 0 0 auto }
.brand-mark i { display: block; background: var(--ink); border-radius: 2px }
.brand-mark i:nth-child(2),.brand-mark i:nth-child(3) { background: var(--accent) }
.nav-inner nav { display: flex; gap: 26px; margin-right: auto }
.nav-inner nav a,.nav-actions>a,.text-button,.lang-button { color: var(--ink-2); font-size: 14px; transition: color .2s }
.nav-inner nav a:hover,.nav-actions>a:hover,.text-button:hover { color: var(--ink) }
.nav-actions { display: flex; align-items: center; gap: 17px }
.nav-actions form { margin: 0 }
.text-button,.lang-button { appearance: none; border: 0; background: none; cursor: pointer; padding: 3px }
.lang-button { font-size: 11px; font-weight: 700; letter-spacing: .08em; border: 1px solid var(--line-strong); border-radius: 20px; padding: 5px 8px }
.button { appearance: none; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 25px; font-weight: 650; letter-spacing: -.01em; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s, opacity .2s }
.button:hover:not(:disabled) { transform: translateY(-1px) }
.button.primary { color: #fff; background: var(--ink); box-shadow: 0 8px 24px rgba(29,29,31,.16) }
.button.primary:hover:not(:disabled) { background: #000; box-shadow: 0 11px 30px rgba(29,29,31,.2) }
.button.secondary { color: var(--ink); background: rgba(255,255,255,.8); border: 1px solid var(--line-strong) }
.button.light { color: var(--ink); background: #fff }
.button.compact { min-height: 38px; padding-inline: 18px; font-size: 13px }
.button.wide { width: 100% }
.button.disabled,.button:disabled { cursor: not-allowed; opacity: .46 }
.eyebrow { margin: 0 0 14px; text-transform: uppercase; font-size: 11px; font-weight: 750; letter-spacing: .16em; color: var(--accent) }
.quiet { color: var(--quiet) }
.hero { min-height: 750px; display: grid; grid-template-columns: .87fr 1.13fr; align-items: center; gap: 60px; padding-block: 95px 110px }
.hero h1 { margin: 0; max-width: 550px; font-family: var(--display); font-size: clamp(64px, 7vw, 102px); line-height: .93; letter-spacing: -.07em; font-weight: 720 }
.lede { max-width: 530px; margin: 31px 0 0; font-size: 20px; line-height: 1.55; color: var(--ink-2); letter-spacing: -.02em }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 36px }
.text-link { font-size: 15px; font-weight: 650 }
.text-link span { display: inline-block; margin-left: 5px; transition: transform .2s }
.text-link:hover span { transform: translateY(3px) }
.hero-copy>.quiet { font-size: 12px; margin-top: 13px }
.hero-art { position: relative }
.hero-art:before { content:""; position:absolute; width:84%; aspect-ratio:1; inset: 3% 5% auto auto; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e9a68e, #d9cdc1 48%, transparent 70%); filter: blur(26px); opacity:.52 }
.fabric-card { position: relative; overflow: hidden; width: 100%; max-width: 650px; margin-left:auto; border-radius: 26px; background: #faf9f6; box-shadow: 0 35px 100px rgba(51,46,40,.18), 0 3px 10px rgba(51,46,40,.06); transform: perspective(1100px) rotateY(-4deg) rotateX(2deg); animation: float 8s ease-in-out infinite }
.fabric-toolbar,.fabric-foot { height: 56px; display:flex; align-items:center; padding:0 20px; gap:12px; font-size:12px; border-bottom:1px solid var(--line) }
.fabric-toolbar i { width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:18px 0 #eab256,36px 0 #77aa78; margin-right:35px }
.fabric-toolbar span { font-weight:650; flex:1 }.fabric-toolbar b { color:#4e8c58; font-weight:600 }
.fabric-grid { height: 455px; background-color:#e9e5dc; background-image: linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:21px 21px; position:relative }
.fabric-grid:after,.mini-grid:after,.preview-pattern:after { content:""; position:absolute; inset:0; background: conic-gradient(from 45deg at 25% 25%, transparent 0 25%,#243133 0 50%,transparent 0 75%,#243133 0) 0 0/84px 84px; mix-blend-mode:multiply; opacity:.88 }
.fabric-foot { border:0; border-top:1px solid var(--line); justify-content:space-between; color:var(--quiet) }
@keyframes float { 0%,100%{transform:perspective(1100px) rotateY(-4deg) rotateX(2deg) translateY(0)} 50%{transform:perspective(1100px) rotateY(-2deg) rotateX(1deg) translateY(-8px)} }
.reveal { animation: reveal .8s cubic-bezier(.2,.75,.2,1) both }.delay-1{animation-delay:.12s}
@keyframes reveal { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.feature-intro { padding: 135px 0 65px; border-top:1px solid var(--line) }
.feature-intro h2 { max-width: 850px; margin:0; font-size:clamp(42px,6vw,72px); line-height:1.02; letter-spacing:-.055em }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:130px }
.feature-card { min-height:550px; padding:28px; border-radius:28px; background:#edeae3; display:flex; flex-direction:column; overflow:hidden; position:relative }
.feature-card:nth-child(2){background:#dedbd3}.feature-card:nth-child(3){background:#dce3df}
.feature-number { font-size:11px; color:var(--quiet); margin-bottom:26px }
.feature-card h3 { margin:auto 0 12px; font-size:30px; line-height:1.05; letter-spacing:-.045em }
.feature-card p { margin:0; color:var(--ink-2); line-height:1.55 }
.mini-grid { height:225px; margin:-5px -50px 30px; background:#f2eee5; position:relative; transform:rotate(-5deg); box-shadow:var(--shadow) }
.mini-grid:after { background-size:52px 52px; opacity:.75 }
.instruction-sample { margin:45px 0; padding:24px; min-height:180px; background:#f9f8f4; border-radius:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px; transform:rotate(2deg) }
.instruction-sample b{font-family:ui-monospace,monospace}.instruction-sample span{font-size:13px;line-height:1.4}.instruction-sample span:last-child{margin-top:auto;color:var(--quiet)}
.paper { width:68%; height:255px; margin:20px auto; background:#fafafa; box-shadow:var(--shadow); padding:28px; transform:rotate(-3deg); border-radius:3px }
.paper b{font-size:15px}.paper i{display:block;height:7px;background:#dedfdc;margin-top:18px;border-radius:3px}.paper i:nth-child(3){width:76%}.paper i:nth-child(4){height:95px;background:repeating-linear-gradient(45deg,#bdc8c1 0 8px,#edf0ed 8px 16px)}
.closing { padding: 0 0 100px }
.closing>div { border-radius:34px; padding:90px max(38px,8vw); background:var(--ink); color:#fff; text-align:center }
.closing h2 { max-width:850px; margin:0 auto 40px; font-size:clamp(42px,6vw,72px); line-height:1.02; letter-spacing:-.055em }
.site-footer { min-height:250px; border-top:1px solid var(--line); padding-block:55px; display:grid; grid-template-columns:1fr 1fr; gap:25px; align-items:start }
.site-footer p,.site-footer small{color:var(--quiet)}.site-footer div{display:flex;gap:22px;justify-content:flex-end;font-size:14px}.site-footer small{grid-column:1/-1}
.pricing-page { padding-block:100px 140px; min-height:80vh }.pricing-page>h1{font-size:clamp(48px,7vw,82px);line-height:1;letter-spacing:-.06em;max-width:900px;margin:0 0 60px}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px}.pricing-grid article{padding:40px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.45)}.pricing-grid article.featured{background:var(--ink);color:#fff}.pricing-grid .plan{text-transform:uppercase;letter-spacing:.12em;font-size:11px}.pricing-grid h2{font-size:48px;letter-spacing:-.05em}.pricing-grid h2 small{font-size:16px;font-weight:500;letter-spacing:0;opacity:.65}.pricing-grid ul{list-style:none;padding:0;margin:30px 0}.pricing-grid li{padding:12px 0;border-bottom:1px solid currentColor;opacity:.75}
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:90px 24px; background:radial-gradient(circle at 15% 10%,#ead7ca,transparent 32%),radial-gradient(circle at 90% 85%,#d7e1dc,transparent 34%),var(--paper) }
.auth-brand { position:absolute;top:28px;left:32px;font-weight:700 }
.auth-card { width:min(440px,100%); padding:46px; border-radius:28px; background:rgba(255,255,255,.82); backdrop-filter:blur(20px); box-shadow:var(--shadow) }
.auth-card h1 { margin:0 0 30px;font-size:42px;letter-spacing:-.05em }
.form-stack{display:flex;flex-direction:column;gap:18px}.form-stack label,.modal-card label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:650;color:var(--ink-2)}
input,select{width:100%;height:48px;border:1px solid var(--line-strong);border-radius:12px;padding:0 14px;background:#fff;color:var(--ink);outline:none;transition:border .2s,box-shadow .2s}
input:focus,select:focus{border-color:var(--ink);box-shadow:0 0 0 4px rgba(29,29,31,.08)}
.check{flex-direction:row!important;align-items:center}.check input{width:18px;height:18px}.auth-switch{text-align:center;margin:25px 0 0;color:var(--quiet);font-size:13px}.auth-switch a{color:var(--ink);font-weight:650}
.alert{padding:14px 16px;border-radius:12px;background:#e6efe7;color:#276136;margin-bottom:22px;font-size:13px;overflow-wrap:anywhere}.alert.error{background:#f8e5e0;color:#8f3324}
.app-main{padding-block:65px 120px;min-height:calc(100vh - 68px)}.dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:52px}.dashboard-head h1{font-size:58px;letter-spacing:-.06em;margin:0 0 10px}.dashboard-head p{margin-bottom:0}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card{background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:transform .25s,box-shadow .25s}.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.project-preview{display:block;height:265px;background:#e8e3d8;padding:30px}.preview-pattern{height:100%;position:relative;background:var(--p2);overflow:hidden;box-shadow:0 13px 30px rgba(40,35,30,.14)}.preview-pattern:after{background-size:46px 46px;opacity:.85}
.project-meta{padding:20px;display:flex;gap:15px;align-items:start}.project-meta>div{flex:1}.project-meta h2{font-size:17px;margin:0 0 6px}.project-meta p{font-size:12px;color:var(--quiet);margin:0}.icon-button{border:0;background:none;cursor:pointer}
.empty-state{min-height:460px;border:1px dashed var(--line-strong);border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}.empty-state h2{font-size:30px;margin:25px 0 6px}.empty-state p{color:var(--quiet);margin:0 0 25px}.empty-motif{width:100px;height:100px;background:conic-gradient(from 45deg,var(--ink) 0 25%,#e6dfd2 0 50%,var(--accent) 0 75%,#e6dfd2 0);border-radius:22px;transform:rotate(8deg);box-shadow:var(--shadow)}
.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none}.modal::backdrop{background:rgba(15,15,15,.42);backdrop-filter:blur(8px)}.modal-card{width:min(560px,calc(100vw - 30px));background:#faf9f6;border-radius:26px;padding:36px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:18px;position:relative}.modal-card h2{margin:0 0 8px;font-size:38px;letter-spacing:-.05em}.modal-close{position:absolute;right:20px;top:18px;border:0;background:#e9e7e1;width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer}.field-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.editor-shell{height:100vh;display:grid;grid-template-columns:64px 1fr 330px;grid-template-rows:62px 1fr;background:#e9e8e4;overflow:hidden}.editor-topbar{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:0 14px;background:rgba(250,249,246,.95);border-bottom:1px solid var(--line);z-index:5}.back-link{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eceae5;font-size:26px}.project-title{border:0;background:transparent;width:min(300px,30vw);font-weight:650;box-shadow:none!important;padding:0;height:38px}.save-state{font-size:11px;color:#578060;margin-right:auto}.topbar-actions{display:flex;align-items:center}.segmented{height:34px;border:1px solid var(--line);background:#fff;padding:0 13px;font-size:11px;cursor:pointer}.segmented:first-child{border-radius:9px 0 0 9px}.segmented:nth-child(2){border-radius:0 9px 9px 0;margin-right:10px}.segmented.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.editor-tools{grid-column:1;grid-row:2;background:#faf9f6;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:8px}.tool{width:38px;height:38px;border:0;border-radius:10px;background:transparent;cursor:pointer;display:grid;place-items:center;font-weight:700}.tool:hover,.tool.active{background:#e7e5df}.tool-rule{height:1px;width:28px;background:var(--line);margin:4px 0}.zoom-label{font-size:9px;font-weight:600;color:var(--quiet)}
.canvas-stage{grid-column:2;grid-row:2;overflow:hidden;position:relative;touch-action:none;background-color:#dfded9;background-image:radial-gradient(rgba(29,29,31,.1) .7px,transparent .7px);background-size:12px 12px}#pattern-canvas{position:absolute;inset:0;width:100%;height:100%;outline:none;cursor:crosshair}
.editor-inspector{grid-column:3;grid-row:2;background:#faf9f6;border-left:1px solid var(--line);overflow-y:auto}.editor-inspector section{padding:22px;border-bottom:1px solid var(--line)}.metric-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px}.metric-row span{color:var(--quiet)}.inspector-heading{display:flex;justify-content:space-between;align-items:center}.tiny-button{width:24px;height:24px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer}.palette-list{display:flex;flex-direction:column;gap:9px}.color-row{display:grid;grid-template-columns:30px 1fr 72px;gap:8px;align-items:center}.color-row input[type=color]{width:30px;height:30px;padding:2px;border-radius:50%}.color-row input{height:34px;font-size:11px;padding:0 8px}.status-dot{width:9px;height:9px;border-radius:50%;background:#e05c49}.status-dot.good{background:#5d9b68}.check-list{font-size:12px}.check-item{padding:10px 0;border-top:1px solid var(--line);color:#9a3b2b;cursor:pointer}.check-item.warning{color:#8b6b24}.instruction-preview{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;line-height:1.55;max-height:230px;overflow:auto}.instruction-preview p{margin:0 0 8px}.editor-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:11px 18px;font-size:12px;z-index:100}
.narrow{max-width:760px}.settings-card{margin-top:35px;border:1px solid var(--line);border-radius:20px;background:#fff}.settings-card>div{padding:19px 22px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.settings-card>div:last-child{border:0}.settings-card span{color:var(--quiet)}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:230px 1fr;background:#f0f1ef}.admin-nav{padding:26px 22px;background:#1e211f;color:#fff}.admin-nav nav{display:flex;flex-direction:column;gap:6px;margin-top:55px}.admin-nav nav a{padding:11px 12px;border-radius:9px;color:#afb4b0;font-size:13px}.admin-nav nav a:hover,.admin-nav nav a.active{background:#323632;color:#fff}.admin-content{padding:55px;max-width:1400px}.admin-content>h1{font-size:52px;letter-spacing:-.055em;margin:0 0 40px}.admin-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.admin-metrics article{padding:22px;background:#fff;border-radius:16px;border:1px solid var(--line);display:flex;flex-direction:column}.admin-metrics span,.admin-metrics small{font-size:11px;color:var(--quiet)}.admin-metrics strong{font-size:36px;letter-spacing:-.05em;margin:10px 0}.admin-panel{margin-top:30px;background:#fff;border-radius:18px;border:1px solid var(--line);overflow:hidden}.panel-head{padding:22px}.panel-head h2{margin:0;font-size:24px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{text-align:left;padding:14px 20px;border-top:1px solid var(--line)}th{color:var(--quiet);font-weight:500}td small,td strong{display:block}.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#eee}.pill.licensed{background:#e3f1e5;color:#32703c}.pill.trial{background:#e5edf1;color:#3b677c}.audit-list>div{display:flex;justify-content:space-between;padding:14px 22px;border-top:1px solid var(--line);font-size:12px}.audit-list small{color:var(--quiet)}
.error-shell{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:min(800px,calc(100% - 48px));margin:auto}.error-shell h1{font-size:52px;letter-spacing:-.05em;max-width:700px}
@media (max-width:980px){.hero{grid-template-columns:1fr;padding-top:70px}.hero h1{max-width:700px}.hero-art{max-width:650px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:480px}.project-grid{grid-template-columns:repeat(2,1fr)}.editor-shell{grid-template-columns:58px 1fr;}.editor-inspector{display:none}.admin-metrics{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.shell{width:min(100% - 30px,1180px)}.nav-inner nav{display:none}.nav-actions .button,.nav-actions>a:not(:last-child){display:none}.hero{min-height:auto;padding-block:70px 90px;gap:55px}.hero h1{font-size:60px}.lede{font-size:18px}.fabric-grid{height:310px}.feature-intro{padding-top:90px}.feature-card{min-height:450px}.pricing-grid,.project-grid{grid-template-columns:1fr}.dashboard-head{align-items:start;gap:25px}.dashboard-head h1{font-size:44px}.project-preview{height:230px}.field-row{grid-template-columns:1fr}.editor-topbar{padding:0 8px}.project-title{width:120px}.save-state{display:none}.segmented{display:none}.topbar-actions .button{font-size:0;padding:0 13px}.topbar-actions .button:after{content:"PDF";font-size:11px}.auth-card{padding:32px 24px}.admin-shell{display:block}.admin-nav{display:none}.admin-content{padding:35px 18px}.admin-metrics{grid-template-columns:1fr 1fr}.site-footer{grid-template-columns:1fr}.site-footer div{justify-content:flex-start;flex-wrap:wrap}.site-footer small{grid-column:auto}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}