@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap";:root{--paper:#f6f8f1;--ink:#17140f;--muted:#615d52;--line:#d8d7cc;--line-strong:#17140f;--lime:#c7f464;--lime-soft:#effbd0;--coral:#ff6f59;--blue:#1e5bff;--gold:#ffcf56;--green:#11b879;--display:"Bricolage Grotesque", "Trebuchet MS", sans-serif;--body:"IBM Plex Sans", "Trebuchet MS", sans-serif;--mono:"IBM Plex Mono", Consolas, monospace;--shadow:0 24px 60px #17140f1c;color:var(--ink);background:var(--paper);font-family:var(--body);font-synthesis:none;letter-spacing:0;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.45}*{box-sizing:border-box}body{background:linear-gradient(135deg, #c7f4643d, transparent 34%), linear-gradient(#17140f0b 1px, transparent 1px), linear-gradient(90deg, #17140f0b 1px, transparent 1px), var(--paper);background-size:auto,44px 44px,44px 44px,auto;min-width:320px;min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{-webkit-tap-highlight-color:transparent}#root{min-height:100vh}.figma-demo{color:#1d1b18;background:radial-gradient(circle at 18% 8%,#c7f46442,#0000 30%),linear-gradient(135deg,#f8f8f2,#eef1ea);min-height:100vh;overflow:hidden}button,input{font:inherit}.figma-topbar{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffdb;border-bottom:1px solid #1d1b181f;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;gap:18px;height:64px;padding:0 18px;display:grid;position:relative}.file-block,.presence-stack,.tool-strip,.tool-strip button,.panel-search,.properties-head,.property-section span,.zoom-control,.multiplayer-cursor span,.cursor-message span{align-items:center;display:flex}.file-block{gap:10px;min-width:0}.file-mark{background:#c7f464;border:1px solid #1d1b18;border-radius:8px;place-items:center;width:36px;height:36px;display:grid;box-shadow:4px 4px #1d1b18}.file-block strong,.file-block small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.file-block strong{font-family:var(--display);font-size:1rem;line-height:1}.file-block small{color:#69645b;font-family:var(--mono);margin-top:3px;font-size:.68rem;font-weight:800}.tool-strip{background:#fff;border:1px solid #1d1b181f;border-radius:10px;justify-self:center;gap:6px;padding:6px;box-shadow:0 8px 24px #1d1b180f}.tool-strip button{color:#4a4740;cursor:pointer;background:0 0;border:0;border-radius:7px;justify-content:center;width:32px;height:30px}.tool-strip button.is-active{color:#fff;background:#1d1b18}.tool-strip span{color:#69645b;font-family:var(--mono);padding:0 7px;font-size:.68rem;font-weight:900}.presence-stack{justify-content:flex-end;gap:8px}.you-chip,.maya-chip{background:#fff;border:1px solid #1d1b1824;border-radius:999px;min-height:32px;padding:0 11px;font-size:.78rem;font-weight:800}.maya-chip{background:#c7f464;border-color:#1d1b18}.figma-shell{grid-template-columns:244px minmax(0,1fr) 286px;height:calc(100vh - 64px);min-height:620px;display:grid}.layers-panel,.properties-panel{z-index:5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffc7;border-color:#1d1b181f;min-width:0;position:relative}.layers-panel{border-right:1px solid #1d1b181f;padding:14px}.properties-panel{border-left:1px solid #1d1b181f;padding:14px}.panel-search{color:#7c776d;background:#fff;border:1px solid #1d1b181a;border-radius:8px;gap:8px;height:34px;padding:0 10px;font-size:.78rem;font-weight:700}.layer-group{gap:4px;margin-top:16px;display:grid}.layer-group>span{color:#7c776d;font-family:var(--mono);text-transform:uppercase;margin:0 0 5px 2px;font-size:.66rem;font-weight:900}.layer-group button{color:#35312b;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;align-items:center;gap:8px;min-height:34px;padding:0 9px;font-size:.8rem;font-weight:700;display:flex}.layer-group button.is-focused{background:#effbd0;border-color:#1d1b181f}.canvas-stage{background-color:#e9ece7;background-image:linear-gradient(#1d1b180e 1px,#0000 1px),linear-gradient(90deg,#1d1b180e 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:28px 28px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;position:relative;overflow:hidden}.canvas-grid{grid-template-columns:620px 280px;align-items:start;gap:28px;display:grid;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.figma-frame{background:#fff;border:1px solid #1d1b182e;border-radius:4px;position:relative;box-shadow:0 28px 70px #1d1b1829}.frame-label{color:#59544b;font-family:var(--mono);font-size:.68rem;font-weight:900;position:absolute;top:-25px;left:0}.frame-main{min-height:470px;padding:18px}.mock-browser{background:#f8fafc;border:1px solid #d9ded8;border-radius:8px;overflow:hidden}.mock-browser-bar{background:#111827;border-bottom:1px solid #e2e8f0;align-items:center;gap:7px;height:34px;padding:0 10px;display:flex}.mock-browser-bar span{background:#ff5f56;border-radius:50%;width:8px;height:8px}.mock-browser-bar span:nth-child(2){background:#ffbd2e}.mock-browser-bar span:nth-child(3){background:#27c93f}.mock-browser-bar strong{color:#d1d5db;font-family:var(--mono);margin-left:8px;font-size:.65rem}.mock-product{grid-template-columns:138px minmax(0,1fr);min-height:390px;display:grid}.mock-sidebar{background:#fff;border-right:1px solid #e2e8f0;align-content:start;gap:8px;padding:16px 12px;display:grid}.mock-sidebar strong{color:#fff;background:#020617;border-radius:8px;place-items:center;width:34px;height:34px;margin-bottom:9px;display:grid}.mock-sidebar span{color:#475569;border-radius:8px;min-height:30px;padding:6px 8px;font-size:.78rem;font-weight:750}.mock-sidebar span:first-of-type{color:#0f172a;background:#f1f5f9}.mock-content{padding:22px}.mock-page-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.mock-page-head span,.release-card>span{color:#64748b;text-transform:uppercase;font-size:.7rem;font-weight:900}.publish-button{color:#fff;cursor:pointer;background:#0f172a;border:1px solid #0f172a;border-radius:8px;min-height:36px;padding:0 16px;font-weight:850}.release-card{cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:8px;min-height:172px;padding:18px}.release-card h2{color:#0f172a;max-width:330px;font-family:var(--body);margin:5px 0 0;font-size:1.18rem;line-height:1.08}.release-card p{color:#64748b;max-width:360px;margin-top:10px;font-size:.84rem;line-height:1.45}.progress-row{align-items:center;gap:12px;margin-top:20px;display:flex}.progress-row i{background:linear-gradient(90deg,#2563eb 72%,#dbeafe 72%);border:1px solid #bfdbfe;border-radius:999px;flex:1;height:8px}.progress-row strong{color:#64748b;white-space:nowrap;font-size:.74rem}.frame-variant{padding:14px}.variant-cards{gap:10px;display:grid}.variant-card{text-align:left;cursor:pointer;background:#fff;border:1px solid #d8d7cc;border-radius:8px;min-height:92px;padding:12px}.variant-card.is-selected{background:#effbd0;border-color:#1d1b18;box-shadow:4px 4px #1d1b1829}.variant-card span,.selected-layer span{color:#7c776d;font-family:var(--mono);text-transform:uppercase;font-size:.62rem;font-weight:900;display:block}.variant-card strong{color:#1d1b18;font-family:var(--display);margin-top:5px;font-size:1.1rem;display:block}[data-guide-target]{position:relative}[data-guide-target]:after{pointer-events:none;content:"";border:2px solid #0000;border-radius:10px;transition:border-color .18s,box-shadow .18s;position:absolute;inset:-5px}.figma-demo:has(.multiplayer-cursor) [data-guide-target]:hover:after{border-color:#1e5bff66}.properties-head{color:#1d1b18;justify-content:space-between;min-height:34px;font-weight:900}.selected-layer,.property-section{background:#fff;border:1px solid #1d1b181f;border-radius:8px;margin-top:14px;padding:12px}.selected-layer strong{margin-top:5px;font-size:.88rem;display:block}.property-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;display:grid}.property-grid label{color:#7c776d;font-family:var(--mono);gap:4px;font-size:.62rem;font-weight:900;display:grid}.property-grid input{color:#1d1b18;min-width:0;height:32px;font-family:var(--body);text-align:center;background:#fff;border:1px solid #1d1b181f;border-radius:8px;font-weight:750}.property-section span{color:#286647;font-family:var(--mono);text-transform:uppercase;gap:7px;font-size:.64rem;font-weight:900}.property-row{color:#4f4a40;border-bottom:1px solid #1d1b1814;justify-content:space-between;align-items:center;min-height:31px;font-size:.78rem;font-weight:750;display:flex}.property-row:last-child{border-bottom:0}.property-row small{color:#8a8478;font-size:.72rem;font-weight:800}.property-row strong{font-size:.78rem}.zoom-control{justify-content:space-between;gap:8px;margin-top:14px}.zoom-control button{color:#1d1b18;cursor:pointer;background:#fff;border:1px solid #1d1b1829;border-radius:8px;width:34px;height:34px;font-weight:900}.zoom-control span{color:#7c776d;font-family:var(--mono);text-align:center;flex:1;font-size:.72rem;font-weight:900}.multiplayer-cursor{z-index:50;pointer-events:none;color:#1d1b18;transform:translate3d(var(--cursor-x), var(--cursor-y), 0);transition:transform .9s cubic-bezier(.16,1,.3,1);position:fixed;top:0;left:0}.multiplayer-cursor:before{content:"";opacity:.18;border:2px solid #1d1b18;border-radius:50%;width:38px;height:38px;animation:1.8s ease-out infinite cursor-pulse;position:absolute;top:-18px;left:-18px}.cursor-shape{fill:#fff;filter:drop-shadow(0 5px 8px #1d1b1833);stroke-width:2.4px;position:absolute;top:-4px;left:-6px}.multiplayer-cursor span{color:#1d1b18;min-height:22px;font-family:var(--mono);background:#c7f464;border:1px solid #1d1b18;border-radius:7px;padding:0 8px;font-size:.62rem;font-weight:900;position:absolute;top:24px;left:27px;box-shadow:3px 3px #1d1b1829}.cursor-message{z-index:49;width:min(286px,100vw - 32px);transform:translate3d(var(--note-x), var(--note-y), 0);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe6;border:1px solid #1d1b1829;border-radius:8px;padding:7px 10px 8px;transition:transform .9s cubic-bezier(.16,1,.3,1);position:fixed;top:0;left:0;box-shadow:0 8px 22px #1d1b181a}.cursor-message span{color:#286647;font-family:var(--mono);text-transform:uppercase;gap:6px;font-size:.62rem;font-weight:900}.cursor-message span:before{content:"";background:#11b879;border-radius:50%;width:7px;height:7px}.cursor-message p{color:#1d1b18;margin:4px 0 0;font-size:.82rem;font-weight:700;line-height:1.38}.cursor-message i{vertical-align:-.15em;background:#1d1b18;width:7px;height:1em;margin-left:3px;animation:.9s step-end infinite blink;display:inline-block}.cursor-message.is-confirmed{background:#effbd0}.cursor-message.is-wrong,.cursor-message.is-nudging{background:#fff8e4}@keyframes cursor-pulse{0%{opacity:.22;transform:scale(.72)}to{opacity:0;transform:scale(1.6)}}@keyframes blink{50%{opacity:0}}@media (width<=1050px){.figma-shell{grid-template-columns:210px minmax(0,1fr)}.properties-panel{display:none}.canvas-grid{grid-template-columns:minmax(520px,620px)}.frame-variant{display:none}}@media (width<=760px){.figma-demo{overflow:auto}.figma-topbar{grid-template-columns:1fr;gap:10px;height:auto;padding:12px}.tool-strip{justify-self:start}.presence-stack{justify-content:flex-start}.figma-shell{grid-template-columns:1fr;height:auto;min-height:900px}.layers-panel{display:none}.canvas-stage{min-height:900px}.canvas-grid{transform-origin:50%;width:calc(100vw - 28px);top:44%;transform:translate(-50%,-50%)scale(.82)}.cursor-message{width:min(280px,100vw - 28px)}}