@font-face{font-family:Matter;src:local("Matter"),local("Matter Regular");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Matter;src:local("Matter Medium");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Matter;src:local("Matter SemiBold"),local("Matter Semibold");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Matter;src:local("Matter Bold");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Matter Mono;src:local("Matter Mono"),local("MatterMono-Regular"),local("Matter Mono Regular");font-weight:400;font-style:normal;font-display:swap}
:root{--white:#fff;--off-white:#faf9f6;--green-50:#faf6fa;--green-100:#f0e7ee;--green-200:#ead8e5;--green-500:#a43787;--green-600:#121212;--near-black:#121212;--interaction:#a43787;--accent-label:#f0c8d8;--bg-dark:#121212;--bg-main:#fff;--text-primary:#121212;--text-secondary:#676c79;--text-tertiary:#8b7c88;--stroke-primary:#ece6eb;--stroke-green:#d8c8d4;--font-sans:"Matter","DM Sans",sans-serif;--font-serif:"Matter","DM Sans",sans-serif;--font-mono:"Matter Mono","Roboto Mono",monospace}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg-main);color:var(--text-primary);margin:0;padding:0;font-size:16px;line-height:1.4}
.min-h-screen{min-height:100vh}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:not(.pill):not(.pill *):not(.hero-tag):not(.btn):not(.btn *):not(button){border-radius:0!important}
.page-grid{grid-template-columns:240px 1fr;min-height:100vh;display:grid}.sidebar{background:var(--green-600);border-right:1px solid #2a1a29;flex-direction:column;gap:40px;height:100vh;height:100dvh;padding:40px 24px calc(40px + env(safe-area-inset-bottom));display:flex;position:sticky;top:0;overflow:hidden;box-sizing:border-box}.sidebar-logo{flex-direction:column;align-items:flex-start;gap:8px;display:flex}.logo-text{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--green-100);font-size:11px;font-weight:500}.sidebar-menu{min-height:0;flex:1;flex-direction:column;display:flex}.sidebar-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--green-500);margin-bottom:12px;font-size:10px;font-weight:500}.sidebar-nav{flex-direction:column;gap:4px;flex:1;min-height:0;overflow-y:auto;display:flex}.sidebar-nav a{color:var(--green-100);opacity:.75;letter-spacing:.01em;padding:6px 10px;font-size:13px;text-decoration:none;transition:background .15s,color .15s}.sidebar-nav a:hover,.sidebar-nav a:active,.sidebar-nav a.active{color:var(--interaction);opacity:1;background:#a4378722}.sidebar-footer{font-family:var(--font-mono);color:var(--green-500);letter-spacing:.06em;text-transform:uppercase;margin-top:auto;font-size:10px;line-height:1.8}.main{overflow-x:hidden}.hero{background:var(--green-600);border-bottom:1px solid #2a1a29;padding:80px 64px 72px;position:relative;overflow:hidden}.hero:before{content:"";opacity:.15;pointer-events:none;background-image:url(/floralia.svg);background-position:50%;background-size:cover;width:100%;height:100%;position:absolute;top:0;right:0}.hero-tag{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;background:var(--accent-label);color:var(--near-black);border:1px solid #d8b7cf;border-radius:5px;margin-bottom:24px;padding:6px 12px;font-size:11px;font-weight:500;display:inline-block}.hero h1{font-family:var(--font-sans);letter-spacing:-2.5px;color:var(--off-white);max-width:560px;margin:0 0 20px;font-size:64px;font-weight:400;line-height:1.05}.hero h1 em{color:var(--interaction);font-style:normal}.hero-sub{color:var(--green-100);opacity:.8;max-width:560px;margin:0 0 32px;font-size:16px;line-height:1.4}.hero-download{flex-direction:column;gap:12px;max-width:560px;display:flex}.hero-download-btn{font-family:var(--font-mono);letter-spacing:.02em;background:var(--interaction);color:var(--near-black);border:1px solid #a43787;align-items:center;gap:10px;width:fit-content;padding:14px 24px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.hero-download-btn:hover{background:#bc5ba0;transform:translateY(-1px)}.hero-download-helper{color:var(--green-100);opacity:.7;font-size:14px;line-height:1.4}.section{border-bottom:1px solid var(--stroke-green);padding:72px 64px}.section:last-child{border-bottom:none}.section-header{align-items:baseline;gap:16px;margin-bottom:48px;display:flex}.section-num{font-family:var(--font-mono);color:var(--green-500);text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;font-size:11px;font-weight:500}.section h2{font-family:var(--font-sans);letter-spacing:-1px;color:var(--near-black);margin:0;font-size:32px;font-weight:400;line-height:1.2}.color-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px;margin-bottom:32px;display:grid}.color-swatch{border:1px solid var(--stroke-green);cursor:pointer;transition:transform .15s,box-shadow .15s}.color-swatch:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.color-swatch-block{width:100%;height:80px}.color-swatch-info{background:var(--white);padding:12px}.color-name{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--text-primary);margin-bottom:2px;font-size:11px;font-weight:500}.color-hex{font-family:var(--font-mono);color:var(--text-secondary);font-size:12px}.color-role{color:var(--text-tertiary);margin-top:4px;font-size:11px}.color-section-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--text-secondary);margin-top:32px;margin-bottom:12px;font-size:10px;font-weight:500}.color-section-label:first-child{margin-top:0}.toast{background:var(--near-black);color:var(--interaction);font-family:var(--font-mono);letter-spacing:.02em;z-index:1000;padding:16px 24px;font-size:13px;font-weight:600;animation:.2s ease-out slideIn;position:fixed;bottom:32px;right:32px;box-shadow:0 8px 24px #0000004d}@keyframes slideIn{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}.code-block{background:var(--near-black);border:1px solid var(--stroke-green);font-family:var(--font-mono);color:#f0d0e4;white-space:pre-wrap;margin-top:16px;padding:24px 28px;font-size:12px;line-height:1.4;overflow-x:auto}.code-block .cm{color:#9a6d8e}.code-block .cs{color:var(--interaction)}.code-block .cv{color:var(--accent-label)}.code-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-top:32px;margin-bottom:8px;font-size:10px;font-weight:500}.code-label:first-child{margin-top:0}.type-specimen{border:1px solid var(--stroke-green);grid-template-columns:1fr 200px;align-items:center;gap:24px;margin-bottom:2px;padding:32px;display:grid}.type-specimen:hover{background:var(--green-50)}.type-meta{text-align:right}.type-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:4px;font-size:10px;font-weight:500}.type-spec{font-family:var(--font-mono);color:var(--text-tertiary);font-size:11px;line-height:1.6}.t-h1-serif{font-family:var(--font-sans);letter-spacing:-2.5px;color:#121212;font-size:96px;font-weight:400;line-height:1}.t-h1-sans{font-family:var(--font-sans);letter-spacing:-2px;color:#121212;font-size:72px;font-weight:400;line-height:1}.t-h2-serif{font-family:var(--font-sans);letter-spacing:-2px;color:#121212;font-size:56px;font-weight:400;line-height:1.05}.t-body-lg{font-family:var(--font-sans);letter-spacing:0;color:#121212;font-size:24px;font-weight:400;line-height:1.3}.t-body{font-family:var(--font-sans);letter-spacing:.5px;color:#121212;font-size:16px;font-weight:400;line-height:1.4}.t-mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:#121212;font-size:14px;font-weight:500;line-height:1.3}.component-row{flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:40px;display:flex}.component-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-top:8px;margin-bottom:14px;font-size:10px;font-weight:500}.component-label:first-child{margin-top:0}.subsection{margin-bottom:48px}.btn{font-family:var(--font-sans);cursor:pointer;letter-spacing:0;border:none;padding:16px 32px;font-size:20px;font-weight:400;text-decoration:none;transition:background .15s;display:inline-block}.btn-primary{color:#121212;background:#a43787;border-radius:58px}.btn-primary:hover{background:#8d2f72}.btn-secondary{color:#121212;background:#f7edf4;border-radius:58px}.btn-secondary:hover{background:#f3dceb}.btn-secondary-dark{color:#faf9f6;background:#0000004d;border-radius:58px}.btn-secondary-dark:hover{background:#0003}.btn-back{color:#3a092c;background:#fee7fd;border-radius:58px}.btn-back:hover{background:#ffd3fd}.btn-text{color:#121212;background:0 0;padding:0;font-size:18px}.btn-text-dark{color:#faf9f6;background:0 0;padding:0;font-size:18px}.btn-small{color:#3a092c;font-family:var(--font-mono);text-transform:uppercase;background:#fee7fd;border-radius:8px;padding:8px 16px;font-size:13px}.pill{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid;border-radius:5px;padding:8px 16px;font-size:14px;font-weight:500;line-height:1.3;display:inline-block}.pill-green-light{color:#121212;background:#faf9f6;border-color:#a43787}.pill-green{color:#121212;background:#f0e7ee;border-color:#a43787}.pill-indigo{color:#0f0f57;background:#e5e5ff;border-color:#1b1b8f}.pill-pink{color:#3a092c;background:#fee7fd;border-color:#c54b9b}.pill-dark{color:#f0c8d8;background:#121212;border-color:#0000}.pill-yellow{color:#121212;background:#f0c8d8;border-color:#d8b7cf}.card-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;margin-bottom:40px;display:grid}.card{border:1px solid var(--stroke-green);background:var(--white);padding:28px;transition:border-color .15s}.card:hover{border-color:var(--green-500)}.card-dark{background:var(--green-600);border-color:#2a1a29}.card-dark .card-title{color:var(--off-white)}.card-dark .card-body{color:var(--green-100);opacity:.75}.card-accent{background:var(--interaction);border-color:#8d2f72}.card-accent .card-tag{background:var(--near-black);color:var(--interaction);border-color:#0000}.card-accent .card-title{color:var(--near-black)}.card-accent .card-body{color:var(--near-black);opacity:.7}.card-tag{margin-bottom:16px;display:inline-block}.card-title{font-family:var(--font-sans);letter-spacing:-.5px;color:var(--text-primary);margin-bottom:8px;font-size:20px;font-weight:400}.card-body{color:var(--text-secondary);font-size:14px;line-height:1.4}.form-group{flex-direction:column;gap:6px;max-width:360px;margin-bottom:16px;display:flex}.form-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);font-size:10px;font-weight:500}.form-input{font-family:var(--font-sans);color:var(--text-primary);background:var(--white);border:1px solid var(--stroke-primary);border-radius:0;outline:none;width:100%;padding:10px 14px;font-size:14px;transition:border-color .15s}.form-input:focus{border-color:var(--green-500)}.form-input::placeholder{color:var(--text-tertiary)}.input-hint{color:var(--text-tertiary);font-size:12px}.table-wrapper{border:1px solid var(--stroke-green);margin-bottom:40px;overflow:hidden}table{border-collapse:collapse;width:100%}thead{background:var(--green-50);border-bottom:1px solid var(--stroke-green)}th{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);text-align:left;padding:14px 20px;font-size:10px;font-weight:500}td{color:var(--text-primary);border-bottom:1px solid var(--stroke-green);vertical-align:top;padding:16px 20px;font-size:13px}tr:last-child td{border-bottom:none}tr:hover td{background:var(--green-50)}td code{font-family:var(--font-mono);color:var(--green-500);font-size:12px}.trait-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px;margin-bottom:40px;display:grid}.trait-card{border:1px solid var(--stroke-green);background:var(--green-50);padding:24px}.trait-word{font-family:var(--font-sans);letter-spacing:-1px;color:var(--near-black);margin-bottom:8px;font-size:28px}.trait-desc{color:var(--text-secondary);font-size:13px;line-height:1.5}.voice-grid{grid-template-columns:1fr 1fr;gap:2px;margin-bottom:40px;display:grid}.voice-card{border:1px solid var(--stroke-green);padding:28px}.voice-card.do{border-top:3px solid var(--interaction)}.voice-card.dont{border-top:3px solid #ff5996}.voice-card-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;font-size:10px;font-weight:500}.voice-card.do .voice-card-label{color:var(--green-500)}.voice-card.dont .voice-card-label{color:#ff5996}.voice-example{color:var(--text-primary);background:var(--green-50);border-left:2px solid var(--stroke-green);margin-bottom:12px;padding:14px 16px;font-size:14px;font-style:italic;line-height:1.4}.voice-card.dont .voice-example{background:#fff0f4;border-left-color:#ffb8cb;-webkit-text-decoration:line-through #ff5996;text-decoration:line-through #ff5996}.voice-note{color:var(--text-secondary);font-size:12px;line-height:1.4}.spacing-row{flex-wrap:wrap;align-items:flex-end;gap:24px;margin-bottom:32px;display:flex}.spacing-item{flex-direction:column;align-items:center;gap:8px;display:flex}.spacing-block{background:var(--green-200);border:1px solid var(--stroke-green);width:100%;min-width:40px}.spacing-label{font-family:var(--font-mono);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;text-align:center;font-size:10px}.logo-grid{grid-template-columns:repeat(2,1fr);gap:2px;margin-bottom:32px;display:grid}.logo-block{border:1px solid var(--stroke-green);background:var(--white);flex-direction:column;justify-content:center;align-items:center;min-height:180px;padding:40px;display:flex}.logo-block.on-dark{background:var(--green-600)}.logo-block.on-black{background:var(--near-black)}.logo-block.on-green{background:var(--interaction)}.logo-svg{margin-bottom:16px}.logo-block-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-tertiary);font-size:10px}.logo-block.on-dark .logo-block-label,.logo-block.on-black .logo-block-label{color:var(--green-100)}.logo-block.on-green .logo-block-label{color:var(--near-black)}@media (width<=900px){.page-grid{grid-template-columns:1fr}.sidebar{flex-flow:wrap;height:auto;padding:24px 20px calc(24px + env(safe-area-inset-bottom));position:static;box-sizing:border-box}.sidebar-menu{display:block;min-height:auto;flex:initial}.sidebar-nav{flex-flow:wrap;overflow:visible;min-height:auto}.hero{padding:48px 24px}.hero h1{font-size:40px}.section{padding:48px 24px}.voice-grid,.type-specimen{grid-template-columns:1fr}.t-h1-serif,.t-h1-sans{font-size:40px}.t-h2-serif{font-size:32px}}
.machine-toggle{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:8px;padding:12px;background:#121212f2;border:1px solid #2a1a29;box-shadow:0 10px 30px #00000073;backdrop-filter:blur(4px)}.machine-toggle-btn{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:#b79eb0;border:1px solid #0000;align-items:center;gap:10px;padding:12px 16px;font-size:12px;font-weight:500;line-height:1;text-decoration:none;transition:all .15s;display:flex}.machine-toggle-btn:hover{color:#f0c8d8;border-color:#a43787}.machine-toggle-btn-active{color:#fff;background:#2a272a;border-color:#3a3139;border-radius:999px}.machine-toggle-dot{background:#a43787;border-radius:2px;width:20px;height:20px;display:inline-block;box-shadow:inset 0 0 0 1px #bc5ba0}@media (width<=700px){.machine-toggle{bottom:16px;padding:10px}.machine-toggle-btn{padding:10px 12px;font-size:11px}.machine-toggle-dot{width:16px;height:16px}}
.button-showcase{border:1px solid var(--stroke-green);background:var(--white);padding:20px 20px 16px}
.button-surface{background:var(--near-black);border:1px solid #2a1a29;padding:16px;display:flex;flex-direction:column;gap:12px}
.button-row{display:flex;flex-wrap:wrap;gap:12px}
.button-size-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.button-caption{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-top:14px;font-size:10px;line-height:1.6}
.btn{font-family:var(--font-sans);display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid transparent;border-radius:4px;padding:12px 16px;cursor:pointer;font-size:16px;font-weight:500;line-height:1;letter-spacing:.08px;text-decoration:none;transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.btn-primary{background:#faf9f6;color:rgba(18,18,18,.9);border-color:rgba(250,249,246,.45)}
.btn-secondary{backdrop-filter:blur(16px);background:rgba(64,64,64,.5);color:rgba(250,249,246,.9)}
.btn:hover{background:rgba(41,41,41,.5);color:rgba(250,249,246,.9);border-color:transparent}
.btn:active{background:rgba(88,87,86,.5);color:rgba(250,249,246,.9);border-color:transparent}
.btn-size-075{font-size:12px;padding:8px 12px;border-radius:4px}
.btn-size-1{font-size:16px;padding:12px 16px;border-radius:4px}
.btn-size-1125{font-size:18px;line-height:1.1;padding:12px 16px;border-radius:6px}
.btn-with-icon{padding-right:4px}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:rgba(18,18,18,.05);font-size:14px;line-height:1}
.btn-secondary .btn-icon{background:rgba(250,249,246,.05)}
.machine-toggle-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:12px 16px;border:1px solid transparent;border-radius:4px;background:rgba(64,64,64,.5);color:rgba(250,249,246,.9);text-decoration:none;font-family:var(--font-sans);font-size:14px;font-weight:500;line-height:1;letter-spacing:.08px;transition:background .15s,color .15s,border-color .15s,box-shadow .15s;text-transform:none}
.machine-toggle-btn:hover{background:rgba(41,41,41,.5);color:rgba(250,249,246,.9);border-color:transparent}
.machine-toggle-btn:active{background:rgba(88,87,86,.5)}
.machine-toggle-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.2)}
.machine-toggle-btn-active{background:#faf9f6;color:rgba(18,18,18,.9);border-color:rgba(250,249,246,.45);border-radius:4px}
.machine-toggle-dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;background:rgba(18,18,18,.1);box-shadow:none}
.machine-toggle-btn-active .machine-toggle-dot{background:rgba(18,18,18,.12)}
@media (width<=900px){.button-showcase{padding:16px}.button-surface{padding:12px}.button-row,.button-size-row{gap:8px}.btn{font-size:14px}.btn-size-1125{font-size:16px}}
@media (width<=700px){.machine-toggle-btn{padding:10px 12px;font-size:12px}.machine-toggle-dot{width:16px;height:16px}}
.machine-toggle{padding:8px;background:#121212f2;border:1px solid #2a1a29;box-shadow:0 10px 30px #00000073;backdrop-filter:blur(4px);border-radius:4px}
.machine-toggle-btn{min-height:auto;padding:8px 12px;font-size:12px;line-height:1.15;letter-spacing:.12px;border-radius:4px!important;gap:8px}
.machine-toggle-btn-active{border-radius:4px!important}
.machine-toggle-dot{display:none!important}
@media (width<=700px){.machine-toggle-btn{padding:8px 12px;font-size:12px;line-height:1.15;border-radius:4px!important}}