:root { --bg:#101216; --surface:#171a20; --surface-2:#1d2129; --text:#f7f9fc; --muted:#9299a6; --line:rgba(255,255,255,.13); --blue:#287dff; --blue-hover:#4392ff; --blue-soft:rgba(40,125,255,.16); --red:#e85d3f; --shadow:0 22px 60px rgba(0,0,0,.25); }
* { box-sizing:border-box; }
html { background:var(--bg); color:var(--text); }
body { margin:0; min-width:320px; background:var(--bg); font-family:"Space Grotesk",system-ui,sans-serif; }
button,input { font:inherit; } button { touch-action:manipulation; }
.grain { position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.shell { width:min(1280px,calc(100% - 64px)); margin:0 auto; }.topbar { min-height:90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; font-size:16px; font-weight:700; letter-spacing:.08em; }.brand b { color:var(--blue); font-weight:700; }.brand-mark { display:grid; grid-template-columns:repeat(2,8px); grid-template-rows:repeat(2,8px); gap:2px; width:18px; height:18px; transform:rotate(45deg); }.brand-mark i { display:block; background:var(--blue); }.brand-mark i:nth-child(2){background:#78b3ff}.brand-mark i:nth-child(3){background:#f3f6fa}.brand-mark i:nth-child(4){background:#e85d3f}.topbar-right { display:flex; align-items:center; gap:26px; }.live-status { color:var(--muted); font:12px "DM Mono",monospace; }.live-dot,.mini-dot { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px var(--blue-soft); }#ton-connect button { border-radius:4px!important; background:var(--blue)!important; font-family:"Space Grotesk",sans-serif!important; font-weight:600!important; }
.hero { display:flex; justify-content:space-between; padding:82px 0 66px; }.hero-copy { max-width:760px; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 23px; color:var(--blue); font:11px "DM Mono",monospace; letter-spacing:.13em; }.eyebrow-line { width:22px; height:1px; background:var(--blue); display:inline-block; }h1,h2 { margin:0; color:var(--text); font-weight:600; letter-spacing:-.045em; line-height:.98; }h1 { font-size:clamp(54px,7.1vw,102px); }h1 em,h2 em { color:var(--blue); font-style:normal; }.hero-lede { max-width:480px; margin:29px 0 0; color:var(--muted); font-size:16px; line-height:1.5; }.hero-meta { display:flex; gap:42px; margin-top:48px; }.hero-meta div { display:grid; gap:5px; }.hero-meta strong { color:var(--text); font:500 18px "DM Mono",monospace; }.hero-meta span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.hero-note { align-self:flex-end; display:flex; gap:14px; color:var(--muted); font:11px "DM Mono",monospace; line-height:1.5; text-transform:uppercase; letter-spacing:.05em; }.note-index { color:var(--blue); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:42px; align-items:start; }.canvas-column { min-width:0; }.canvas-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }.toolbar-label,.section-label { color:var(--muted); font:11px "DM Mono",monospace; letter-spacing:.1em; }.toolbar-label #board-status { margin-left:8px; color:var(--blue); }.toolbar-actions { display:flex; align-items:center; gap:8px; color:var(--muted); font:11px "DM Mono",monospace; }.icon-button,.reset-button { border:1px solid var(--line); color:var(--muted); background:transparent; cursor:pointer; font:11px "DM Mono",monospace; }.icon-button { width:28px; height:28px; font-size:17px; line-height:1; }.reset-button { padding:7px 10px; margin-left:8px; }.icon-button:hover,.reset-button:hover { color:var(--text); border-color:var(--blue); background:var(--blue-soft); }.board-frame { padding:15px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }.board-wrap { position:relative; aspect-ratio:1; width:100%; overflow:hidden; background:#fff; touch-action:none; user-select:none; }.board-wrap canvas { display:block; width:100%; height:100%; cursor:crosshair; touch-action:none; image-rendering:pixelated; }.board-wrap.dragging canvas { cursor:grabbing; }.canvas-crosshair { position:absolute; width:10px; height:10px; pointer-events:none; }.crosshair-top{top:7px;left:7px;border-top:1px solid var(--blue);border-left:1px solid var(--blue)}.crosshair-bottom{right:7px;bottom:7px;border-right:1px solid var(--blue);border-bottom:1px solid var(--blue)}.canvas-caption { display:flex; justify-content:space-between; padding-top:12px; color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.08em; }
.buy-panel { padding:29px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }.panel-kicker { color:var(--blue); font:11px "DM Mono",monospace; letter-spacing:.14em; }.buy-panel h2 { margin-top:17px; font-size:38px; }.buy-panel h2 span { color:var(--muted); }.panel-copy { margin:19px 0 23px; color:var(--muted); font-size:14px; line-height:1.5; }.wallet-state { display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:39px; padding:0 10px; border:1px solid var(--line); color:var(--muted); font:11px "DM Mono",monospace; }.wallet-state.connected { border-color:rgba(40,125,255,.6); background:var(--blue-soft); color:var(--text); }.wallet-state strong { color:var(--blue); font-weight:500; }.wallet-indicator { width:6px; height:6px; border-radius:50%; background:#59616d; }.wallet-state.connected .wallet-indicator { background:var(--blue); box-shadow:0 0 0 4px rgba(40,125,255,.13); }.stat-strip { display:flex; justify-content:space-between; margin:23px -29px 25px; padding:16px 29px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.stat-strip div { display:grid; gap:5px; }.stat-strip span { color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.08em; }.stat-strip strong { color:var(--text); font:500 17px "DM Mono",monospace; }.stat-strip b { color:var(--blue); font-weight:500; }.color-section { display:grid; gap:13px; }.section-label { display:flex; justify-content:space-between; }.hex-value { color:var(--text); }.swatches { display:flex; flex-wrap:wrap; gap:9px; }.swatch,.custom-color { width:29px; height:29px; border:1px solid transparent; background:var(--swatch); cursor:pointer; }.swatch.active { border-color:var(--text); outline:2px solid var(--blue); outline-offset:2px; }.custom-color { position:relative; overflow:hidden; border-color:var(--line); background:conic-gradient(#f34 0 25%,#ffdf54 0 50%,#56d987 0 75%,#5a78ec 0); }.custom-color input { position:absolute; inset:-8px; width:45px; height:45px; opacity:0; cursor:pointer; }
.image-tool { margin-top:24px; border:1px solid var(--line); }.image-tool summary { min-height:42px; padding:13px 12px; color:var(--text); cursor:pointer; list-style:none; font-size:12px; font-weight:500; }.image-tool summary::-webkit-details-marker { display:none; }.image-tool summary::after { content:"+"; float:right; color:var(--blue); font:17px "DM Mono",monospace; }.image-tool[open] summary::after { content:"-"; }.image-tool-body { display:grid; gap:11px; padding:12px; border-top:1px solid var(--line); }.image-tool label { display:grid; gap:6px; }.image-tool label span { color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.06em; }.image-tool input { width:100%; height:35px; min-width:0; padding:0 9px; border:1px solid var(--line); border-radius:0; outline:none; background:#11141a; color:var(--text); font:12px "DM Mono",monospace; }.image-tool input:focus { border-color:var(--blue); }.image-size input { width:100px; }.image-actions { display:grid; grid-template-columns:1fr 92px; gap:8px; }.soft-button { min-height:35px; border:1px solid var(--blue); background:var(--blue-soft); color:var(--text); cursor:pointer; font-size:12px; font-weight:500; }.soft-button:hover { background:var(--blue); }.image-tool p { margin:0; color:var(--muted); font-size:11px; line-height:1.4; }.selection-hint { display:flex; align-items:center; gap:8px; margin:24px 0 13px; color:var(--muted); font-size:12px; }.hint-icon { color:var(--blue); font-size:17px; }.buy-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:52px; padding:0 17px; border:0; border-radius:2px; background:var(--blue); color:#fff; cursor:pointer; font-size:14px; font-weight:700; }.buy-button:hover { background:var(--blue-hover); }.buy-button:disabled { cursor:not-allowed; opacity:.5; }.button-arrow { font:16px "DM Mono",monospace; }.panel-divider { height:1px; margin:27px 0 20px; background:var(--line); }.owned-row { display:flex; align-items:center; justify-content:space-between; }.owned-row div { display:grid; gap:7px; }.owned-row strong { color:var(--text); font:500 13px "DM Mono",monospace; }.text-button { padding:0; border:0; color:var(--muted); background:none; cursor:pointer; font:11px "DM Mono",monospace; text-decoration:underline; }.text-button:hover { color:var(--text); }
.lower-section { display:grid; grid-template-columns:1fr 1fr; gap:42px; padding:118px 0 100px; }.section-intro h2 { font-size:clamp(37px,5vw,64px); }.activity-list { border-top:1px solid var(--line); }.activity-item { display:grid; grid-template-columns:12px 1fr; align-items:center; gap:12px; min-height:63px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.4; }.activity-item strong { color:var(--text); font-weight:500; }.activity-color { width:7px; height:7px; background:var(--blue); }.footer { display:flex; gap:15px; align-items:center; padding:20px 0 28px; border-top:1px solid var(--line); color:var(--muted); font:10px "DM Mono",monospace; letter-spacing:.08em; }.footer a { color:var(--muted); }.footer a:hover { color:var(--text); }.footer-dot { width:3px; height:3px; border-radius:50%; background:var(--blue); }
.toast { position:fixed; left:50%; bottom:25px; z-index:20; transform:translate(-50%,15px); max-width:calc(100% - 32px); padding:12px 18px; background:var(--blue); color:#fff; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:.2s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }.payment-dialog { width:min(430px,calc(100% - 32px)); padding:0; border:0; background:transparent; color:var(--text); }.payment-dialog::backdrop { background:rgba(5,7,10,.78); backdrop-filter:blur(5px); }.dialog-inner { position:relative; padding:33px; background:var(--surface-2); border:1px solid var(--line); }.dialog-close { position:absolute; top:14px; right:16px; border:0; background:none; color:var(--muted); font-size:21px; cursor:pointer; }.dialog-inner h2 { font-size:38px; }.dialog-copy { color:var(--muted); font-size:14px; line-height:1.5; }.dialog-summary { display:flex; justify-content:space-between; margin:26px 0 18px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:13px "DM Mono",monospace; }.dialog-summary strong { color:var(--blue); font-weight:500; }.dialog-address { margin:15px 0 0; color:var(--muted); font:10px "DM Mono",monospace; text-align:center; }.dialog-address code { color:var(--text); }
@media (max-width:920px){.shell{width:min(100% - 32px,700px)}.topbar{min-height:74px}.live-status{display:none}.hero{padding:57px 0 46px;display:block}.hero-note{margin-top:35px}.workspace{grid-template-columns:1fr;gap:30px}.buy-panel{padding:24px}.stat-strip{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}.lower-section{grid-template-columns:1fr;gap:35px;padding:80px 0 68px}.canvas-caption span:nth-child(2){display:none}}
@media (max-width:520px){h1{font-size:51px}.hero-meta{gap:16px;justify-content:space-between}.hero-meta strong{font-size:14px}.hero-meta span{font-size:8px}.board-frame{padding:9px}.canvas-caption{font-size:8px}.buy-panel h2{font-size:34px}.footer{font-size:8px;gap:8px;flex-wrap:wrap}.topbar-right{gap:0}.image-actions{grid-template-columns:1fr}.image-size input{width:100%}}