:root{font-family:Segoe UI,Arial,sans-serif;color:#1c2220;background:#f2f4f1;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #1c2220;--muted: #66706c;--line: #d8ddd8;--surface: #ffffff;--surface-soft: #f6f7f5;--accent: #18786e;--accent-dark: #115b54;--accent-soft: #dff1ec;--coral: #e85f4f;--shadow: 0 16px 40px rgba(25, 36, 31, .08)}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100vh;overflow:hidden}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid rgba(24,120,110,.28);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.46}.app-shell{min-height:100vh;background:linear-gradient(rgba(28,34,32,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(28,34,32,.025) 1px,transparent 1px),#f2f4f1;background-size:24px 24px}.skip-link{position:fixed;z-index:100;top:8px;left:8px;padding:10px 14px;color:#fff;background:var(--ink);transform:translateY(-140%)}.skip-link:focus{transform:translateY(0)}.topbar{height:68px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffffe6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-family:Segoe UI,Arial,sans-serif;font-size:20px;font-weight:700;text-decoration:none}.brand-mark{width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--ink);border-radius:6px;box-shadow:inset -5px -5px 0 var(--accent)}.top-actions,.privacy-note,.button{display:flex;align-items:center}.top-actions{gap:9px}.privacy-note{gap:6px;margin-right:8px;color:var(--accent-dark);font-size:12px;font-weight:600}.button{min-height:40px;gap:8px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:#fff;font-weight:600;cursor:pointer}.button-quiet:hover{background:var(--surface-soft)}.button-primary{color:#fff;background:var(--ink);border-color:var(--ink)}.button-primary:hover:not(:disabled){background:var(--accent-dark);border-color:var(--accent-dark)}.workspace{height:calc(100vh - 68px);display:grid;grid-template-columns:286px minmax(0,1fr);padding:14px;gap:14px}.controls-panel,.studio{min-height:0;border:1px solid var(--line);border-radius:7px;background:var(--surface);box-shadow:var(--shadow)}.controls-panel{padding:18px;overflow-y:auto}.tool-switcher{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:18px;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft)}.tool-switcher button{min-width:0;min-height:42px;padding:4px 2px;display:grid;place-items:center;gap:2px;border:0;border-radius:4px;background:transparent;color:var(--muted);font-size:10px;font-weight:700;cursor:pointer}.tool-switcher button.active{color:#fff;background:var(--ink)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.panel-heading>svg{color:var(--coral)}.eyebrow,.section-label{margin:0 0 4px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}h1{margin:0;font-family:Segoe UI,Arial,sans-serif;font-size:22px;line-height:1.2;letter-spacing:0}.file-tile{width:100%;min-height:66px;padding:9px;display:grid;grid-template-columns:48px minmax(0,1fr) 18px;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft);cursor:pointer}.file-tile:hover,.file-tile.is-dragging{border-color:var(--accent);background:var(--accent-soft)}.file-tile img{width:48px;height:48px;object-fit:cover;border-radius:4px}.file-copy{min-width:0;display:block}.file-copy strong,.file-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-copy strong{margin-bottom:3px;font-size:13px}.file-copy small{color:var(--muted);font-size:11px}.control-section,.export-section{margin-top:19px;padding-top:18px;border-top:1px solid var(--line)}.select-field,.range-field{display:block;margin-bottom:17px}.field-label,.mode-field legend{width:100%;margin-bottom:8px;display:flex;justify-content:space-between;color:#3f4845;font-size:12px;font-weight:600}.field-label output{color:var(--accent-dark);font-variant-numeric:tabular-nums}.select-wrap{position:relative;display:block}.select-wrap select{width:100%;height:40px;padding:0 36px 0 11px;color:var(--ink);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);border-radius:5px;background:#fff}.select-wrap svg{position:absolute;top:12px;right:11px;pointer-events:none}.mode-field{min-width:0;margin:0 0 17px;padding:0;border:0}.segmented,.mobile-tabs{display:grid;grid-template-columns:1fr 1fr;padding:3px;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft)}.segmented.segments-3{grid-template-columns:repeat(3,1fr)}.segmented button,.mobile-tabs button{min-height:34px;border:0;border-radius:4px;background:transparent;font-size:12px;font-weight:600;cursor:pointer}.segmented button.active,.mobile-tabs button.active{color:#fff;background:var(--ink)}input[type=range]{width:100%;height:4px;margin:5px 0;accent-color:var(--accent);cursor:pointer}.toggle-row{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#3f4845;font-size:12px;font-weight:600;cursor:pointer}.toggle-row input{position:absolute;opacity:0}.toggle{width:38px;height:22px;flex:0 0 auto;padding:3px;border-radius:12px;background:#cfd5d1;transition:background .16s ease}.toggle span{width:16px;height:16px;display:block;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .16s ease}.toggle-row input:checked+.toggle{background:var(--accent)}.toggle-row input:checked+.toggle span{transform:translate(16px)}.toggle-row input:focus-visible+.toggle{outline:3px solid rgba(24,120,110,.28);outline-offset:2px}.color-field{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#3f4845;font-size:12px;font-weight:600}.color-control{display:flex;align-items:center;gap:8px}.color-control input{width:34px;height:28px;padding:2px;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer}.color-control output{min-width:60px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}.dimension-row{display:grid;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr);align-items:end;gap:6px;margin-bottom:17px}.dimension-row>span{padding-bottom:11px;color:var(--muted);text-align:center}.dimension-row label span{display:block;margin-bottom:7px;color:#3f4845;font-size:12px;font-weight:600}.dimension-row input{width:100%;height:40px;padding:0 9px;border:1px solid var(--line);border-radius:5px;background:#fff;font-variant-numeric:tabular-nums}.inline-notice{margin:7px 0 0;padding:9px 10px;color:var(--accent-dark);border-left:3px solid var(--accent);background:var(--accent-soft);font-size:11px}.export-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.export-grid button{min-width:0;min-height:55px;display:grid;place-items:center;gap:2px;border:1px solid var(--line);border-radius:5px;background:#fff;font-size:11px;font-weight:600;cursor:pointer}.export-grid button:hover:not(:disabled){color:var(--accent-dark);border-color:var(--accent);background:var(--accent-soft)}.studio{display:grid;grid-template-rows:52px minmax(0,1fr) 48px;overflow:hidden}.utility-studio{grid-template-rows:52px minmax(0,1fr) 48px}.studio-toolbar,.statusbar{display:flex;align-items:center;border-color:var(--line);background:#fffffff5}.studio-toolbar{padding:0 12px 0 16px;justify-content:space-between;border-bottom:1px solid var(--line)}.conversion-state{display:inline-flex;align-items:center;gap:6px;color:var(--accent-dark);font-size:12px;font-weight:600}.zoom-controls{display:flex;align-items:center;gap:4px}.zoom-controls button,.retrace-button{min-width:34px;height:34px;display:grid;place-items:center;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer}.zoom-controls button:hover,.retrace-button:hover:not(:disabled){border-color:var(--line);background:var(--surface-soft)}.zoom-controls input{width:92px;margin:0 5px}.zoom-value{width:42px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;text-align:center}.mobile-tabs{display:none}.utility-toolbar{justify-content:space-between}.toolbar-badge{padding:5px 8px;color:var(--accent-dark);border:1px solid #b9dcd4;border-radius:4px;background:var(--accent-soft);font-size:10px;font-weight:700}.preview-grid{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.preview-panel{min-width:0;min-height:0;display:grid;grid-template-rows:39px minmax(0,1fr);background:#fff}.preview-panel header{padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.preview-panel header span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700}.preview-panel header small{color:var(--muted);font-size:11px}.preview-stage{position:relative;min-height:0;padding:26px;display:flex;align-items:safe center;justify-content:safe center;overflow:auto}.checkerboard{background-color:#f7f8f6;background-image:linear-gradient(45deg,#e9ece8 25%,transparent 25%),linear-gradient(-45deg,#e9ece8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ece8 75%),linear-gradient(-45deg,transparent 75%,#e9ece8 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.preview-stage>img,.svg-preview{max-width:none;height:auto;flex:0 0 auto;filter:drop-shadow(0 8px 18px rgba(22,29,26,.12));transition:opacity .16s ease}.svg-preview svg{width:100%;height:auto;display:block}.svg-preview.is-updating{opacity:.55}.favicon-workarea,.resize-workarea{min-height:0;overflow:auto}.favicon-workarea{padding:28px}.browser-sample{width:min(100%,760px);height:82px;margin:0 auto 24px;display:grid;grid-template-columns:54px 190px minmax(0,1fr);align-items:end;border:1px solid #cfd5d1;border-radius:7px 7px 4px 4px;background:#e9ece8;box-shadow:0 12px 30px #19241f1a;overflow:hidden}.browser-dots{height:38px;display:flex;align-items:center;justify-content:center;gap:4px}.browser-dots i{width:6px;height:6px;display:block;border-radius:50%;background:#aab2ae}.browser-dots i:first-child{background:var(--coral)}.browser-tab{height:38px;padding:0 12px;display:flex;align-items:center;gap:8px;border-radius:6px 6px 0 0;background:#fff;font-size:11px}.browser-tab img,.browser-tab>span{width:18px;height:18px;flex:0 0 auto;object-fit:contain}.browser-address{height:31px;margin:0 10px 5px;padding:0 12px;display:flex;align-items:center;color:var(--muted);border-radius:5px;background:#fff;font-size:10px}.favicon-preview-grid{width:min(100%,760px);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.favicon-card{min-width:0;border:1px solid var(--line);border-radius:6px;background:#fff;overflow:hidden}.favicon-image{height:132px;display:grid;place-items:center;background-color:#f7f8f6;background-image:linear-gradient(45deg,#e9ece8 25%,transparent 25%),linear-gradient(-45deg,#e9ece8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9ece8 75%),linear-gradient(-45deg,transparent 75%,#e9ece8 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.favicon-image span{display:grid;place-items:center;filter:drop-shadow(0 5px 10px rgba(22,29,26,.16))}.favicon-image img{width:100%;height:100%;display:block}.favicon-card footer{height:42px;padding:0 8px 0 11px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.favicon-card footer strong{color:var(--ink);font-size:12px}.favicon-card footer button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;cursor:pointer}.favicon-card footer button:hover:not(:disabled){color:var(--accent-dark);background:var(--accent-soft)}.resize-workarea{padding:28px;display:flex;align-items:center;justify-content:center}.asset-frame{position:relative;width:min(78%,900px);max-height:82%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(28,34,32,.16);box-shadow:0 14px 34px #161d1a24;overflow:hidden}.asset-frame img{width:100%;height:100%;display:block}.stage-loader{color:var(--accent)}.statusbar{padding:0 12px 0 16px;gap:22px;border-top:1px solid var(--line)}.status-metric{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font-size:11px}.status-metric span{color:var(--muted)}.status-metric strong{font-size:12px;font-variant-numeric:tabular-nums}.retrace-button{width:auto;margin-left:auto;padding:0 8px;grid-auto-flow:column;gap:6px;font-size:11px;font-weight:600}.toast{position:fixed;z-index:50;right:18px;bottom:18px;max-width:calc(100vw - 36px);min-height:42px;padding:0 14px;display:flex;align-items:center;gap:8px;color:#fff;background:var(--ink);border-radius:6px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .16s ease,transform .16s ease;font-size:12px}.toast.show{opacity:1;transform:translateY(0)}.spin{animation:spin .8s linear infinite}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:920px){body{overflow:auto}.workspace{height:auto;min-height:calc(100vh - 68px);grid-template-columns:240px minmax(0,1fr)}.studio{min-height:720px}.favicon-workarea{padding:18px}.statusbar{gap:12px;overflow-x:auto}.status-metric:first-child{display:none}}@media(max-width:720px){.topbar{height:60px;padding:0 12px}.brand{font-size:18px}.brand-mark{width:34px;height:34px}.privacy-note,.button-quiet{display:none}.button-primary{min-height:42px;padding:0 11px}.workspace{min-height:calc(100vh - 60px);grid-template-columns:1fr;padding:8px;gap:8px}.controls-panel{padding:14px;overflow:visible}.control-section{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.select-field,.mode-field,.toggle-row,.color-field,.dimension-row,.inline-notice{grid-column:1 / -1}.export-section{margin-top:5px}.studio{min-height:620px;grid-template-rows:56px minmax(0,1fr) 50px}.utility-studio{min-height:660px}.mobile-tabs{width:174px;display:grid}.conversion-state,.zoom-controls input{display:none}.zoom-value{width:36px}.preview-grid{grid-template-columns:1fr}.preview-panel.mobile-hidden{display:none}.preview-stage{padding:16px}.statusbar{gap:16px}.status-metric:nth-child(2){display:none}.favicon-workarea{padding:14px}.browser-sample{height:76px;grid-template-columns:44px 144px minmax(0,1fr);margin-bottom:14px}.browser-address{margin-right:6px}.favicon-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.favicon-image{height:112px}.resize-workarea{padding:16px}.asset-frame{width:88%;max-height:86%}}@media(max-width:420px){.button-primary .button-label{display:none}.control-section{display:block}.studio-toolbar{padding:0 8px}.mobile-tabs{width:158px}.zoom-controls button:last-of-type{display:none}.status-metric:nth-child(3){display:none}.tool-switcher button{min-height:40px}.browser-sample{grid-template-columns:38px 130px minmax(0,1fr)}.browser-address{padding:0 8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}