/* Pixi Studio — shared chrome: page shell, panels, controls, modals, menus, galleries */ :root{ --bg:#0d1017; --panel:#141a23; --panel-2:#1a212c; --card:#161d28; --line:#2a3140; --ink:#e8edf4; --muted:#8b97a8; --muted-2:#6b7688; --accent:#5ed0ff; --accent-2:#a880ff; --good:#57d9a3; --bad:#ff6b6b; --radius:11px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"SFMono-Regular",Consolas,Menlo,monospace; } /* Tells the browser to render its own chrome (scrollbars, form controls, autofill) dark, so defaults don't come through as light boxes. */ :root{color-scheme:dark} *{box-sizing:border-box} /* This is an application, not a document. Interface text — panel labels, modal titles, tab names, tile captions — isn't content to select, and leaving it selectable is what lets a stray click drop a blinking caret into a label that isn't editable (browsers with caret browsing on will do it anywhere). Everything actually worth copying opts back in below. */ body{-webkit-user-select:none;user-select:none} textarea,input,.code,select,[contenteditable]{-webkit-user-select:text;user-select:text} /* One on-theme focus ring, and only for keyboard users. */ :focus-visible{outline:2px solid var(--accent);outline-offset:1px} button:focus:not(:focus-visible),summary:focus:not(:focus-visible){outline:none} html,body{height:100%} /* Nothing on screen until start() has picked a page. The modules are ~430KB of classic scripts at the end of , and the browser will happily paint the half-built studio while it parses them — which is why every reload used to flash the effects page before the welcome screen arrived. showPage drops the class on its first call, so whatever comes up first is the right thing. */ body.booting header, body.booting main{display:none !important} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;overflow:hidden} header{display:flex;align-items:center;gap:13px;padding:9px 16px;border-bottom:1px solid var(--line); background:linear-gradient(180deg,#131824,#0f131b);flex:0 0 auto} header .logo{font-weight:700;font-size:15px;display:flex;align-items:center;gap:9px} header .logo .dot{width:11px;height:11px;border-radius:50%; background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent));box-shadow:0 0 12px var(--accent)} /* The logo goes back to the welcome screen. It has to look like it does that standing still and not only under the pointer, so it wears the same chip the rest of the header wears rather than sitting there as bare text. */ #homeBtn{cursor:pointer;padding:5px 11px;border:1px solid var(--line);border-radius:9px; background:#10151d;transition:border-color .15s ease,background .15s ease,transform .1s ease} #homeBtn:hover{border-color:var(--accent);background:#131c27} #homeBtn:active{transform:translateY(1px)} #homeBtn:focus-visible{outline:2px solid var(--accent);outline-offset:1px} header .sub{color:var(--muted);font-size:12px} header .spacer{flex:1} /* .hbtn is used in modals too, not only in the header — keep it unscoped or the browser default button chrome (white box) leaks through outside

. */ .hbtn{color:var(--muted);text-decoration:none;font-size:12px;border:1px solid var(--line); padding:5px 10px;border-radius:7px;background:transparent;cursor:pointer;font-family:var(--sans)} .hbtn:hover{color:var(--ink);border-color:var(--accent)} main{display:flex;height:calc(100% - 45px);width:100%} /* The panel width is one number for the whole studio, so dragging the divider on either page moves both. The splitter owns the dividing line — .left has no border of its own or you would see two. JS holds the limits (bindSplitters); min-width here only has to agree with it. */ .left{width:var(--left-w,520px);min-width:300px;flex:0 0 auto; display:flex;flex-direction:column;background:var(--panel)} .right{flex:1 1 0;display:flex;flex-direction:column;background:#07090d;position:relative;min-width:0} /* A one-pixel rule you can actually hit: the line is 1px, the grab area is 9. */ .splitter{flex:0 0 auto;width:9px;margin:0 -4px;position:relative;z-index:8; cursor:col-resize;touch-action:none;background:transparent} .splitter::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px; background:var(--line);transition:background .15s ease,width .15s ease} .splitter:hover::after,.splitter.dragging::after,.splitter:focus-visible::after{ background:var(--accent);width:2px;left:3.5px} .splitter:focus-visible{outline:none} /* While dragging, the pointer keeps its meaning everywhere and nothing selects. */ body.resizing,body.resizing *{cursor:col-resize !important;user-select:none !important} /* ---- shared pickers ------------------------------------------------------- A grid of small square choices with an upload tile at the end, and a strip describing the uploaded file. Particles pick textures with it and effects pick a source image, so it is one component in one place. */ .shape-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin-top:6px} .shape-grid button{aspect-ratio:1;background:#10151d;border:1px solid var(--line);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden} .shape-grid button.addtex{background:transparent;border:1px dashed transparent;color:var(--muted-2); font-size:20px;line-height:1;font-family:var(--sans)} .shape-grid button.addtex:hover{color:var(--accent);border-color:var(--line)} .shape-grid button.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .shape-grid button canvas{width:100%;height:100%;display:block;border-radius:7px} /* The uploaded PNG used to get a strip of its own under the grid. It is one of the shapes in the mix now and lives on that shape's own row, so the strip and everything that styled it are gone — see .tex-picked in particles.css. */ .rmpng{background:transparent;border:1px solid var(--line);border-radius:6px; color:var(--muted-2);font-size:11px;cursor:pointer;padding:2px 7px;font-family:var(--sans);flex:0 0 auto} .rmpng:hover{color:var(--bad);border-color:var(--bad)} .phero-wrap{position:relative;padding:12px 13px 11px;border-bottom:1px solid var(--line)} .phero{display:flex;gap:11px;align-items:stretch;width:100%;padding:9px;cursor:pointer; background:var(--card);border:1px solid var(--line);border-radius:11px;text-align:left; font-family:var(--sans);transition:border-color .15s ease,background .15s ease} .phero:hover{border-color:var(--accent);background:#18202c} .phero .th{width:92px;height:69px;flex:0 0 auto;border-radius:7px;object-fit:cover; background:#0b0e14;display:block} .phero .meta{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;flex:1} .phero .meta b{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .phero .meta i{font-style:normal;font-size:11px;color:var(--muted-2); text-transform:uppercase;letter-spacing:.6px;font-weight:700} .phero .go{font-size:11.5px;color:var(--accent);margin-top:4px} .phero-reset{position:absolute;top:19px;right:20px;width:26px;height:26px;padding:0; justify-content:center;font-size:13px;line-height:1;z-index:2} /* The base slot sits inside a block rather than its own wrap, and a pattern base opens its controls right underneath — a pattern base is a layer, and there is nowhere else for its sliders to live. */ .phero.base-slot{margin-top:2px} #baseControls:not(:empty){margin-top:11px;padding-top:10px;border-top:1px solid var(--line)} /* The effects page uses the same front door, but it adds a layer rather than naming the one you are on — so it takes a plus where the thumbnail goes. */ .phero.fx-browse{align-items:center;padding:12px 13px} .phero .ic{width:38px;height:38px;flex:0 0 auto;border-radius:9px;display:flex; align-items:center;justify-content:center;font-size:19px;line-height:1; background:var(--accent);color:#04222e;font-weight:700} .scroll{overflow-y:auto;overflow-x:hidden;flex:1} .scroll::-webkit-scrollbar{width:10px} .scroll::-webkit-scrollbar-thumb{background:#2a3342;border-radius:6px;border:2px solid var(--panel)} .block{padding:12px 13px;border-bottom:1px solid var(--line)} .block h3{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:8px} .block h3 .count{color:var(--muted-2);font-weight:600;letter-spacing:0} /* Collapsible panel sections. The particles page has six of them and every control was on screen at once; only the one being worked on needs to be. */ .block.foldable>h3{cursor:pointer;margin-bottom:0} .block.foldable.open>h3{margin-bottom:10px} .block.foldable>h3:hover{color:var(--ink)} .block.foldable>h3 .fold-caret{color:var(--muted-2);font-size:9px;width:9px;flex:0 0 auto; transition:transform .15s ease;transform:rotate(-90deg)} .block.foldable.open>h3 .fold-caret{transform:rotate(0deg)} .block.foldable>h3 .fold-sum{margin-left:auto;font-size:10.5px;font-weight:600;letter-spacing:0; color:var(--muted-2);text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58%} .block.foldable.open>h3 .fold-sum{display:none} .block.foldable:not(.open)>*:not(h3){display:none} .seg{display:inline-flex;background:#10151d;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:100%} .seg button{flex:1;background:transparent;border:0;color:var(--muted);padding:7px 10px;font-size:12.5px;cursor:pointer;font-family:var(--sans)} .seg button.active{background:var(--accent);color:#04222e;font-weight:700} .seg button:not(.active):hover{color:var(--ink)} /* Eleven spawn shapes don't fit on one row of a 400px panel — wrap them into a grid instead of letting the strip run past the edge. */ .seg.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:1px;background:var(--line)} .seg.grid button{background:#10151d;padding:7px 4px} .seg.grid button.active{background:var(--accent)} select,.btn,input[type=text],input[type=password],input[type=search],input[type=email]{ background:#10151d;border:1px solid var(--line);color:var(--ink);border-radius:8px; padding:7px 10px;font-size:12.5px;cursor:pointer;font-family:var(--sans);width:100%} input[type=text],input[type=password],input[type=search],input[type=email]{cursor:text} input[type=text]:focus,input[type=password]:focus,input[type=search]:focus,input[type=email]:focus{border-color:var(--accent)} input::placeholder,textarea::placeholder{color:var(--muted-2)} select:hover,.btn:hover{border-color:var(--accent)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto} .btn.primary{background:var(--accent);color:#04222e;border-color:var(--accent);font-weight:700} .btn.ghost{background:transparent} .btn.wide{width:100%} .row{display:flex;gap:8px;align-items:center} .row.mt{margin-top:9px} .hint{color:var(--muted-2);font-size:11.5px;margin-top:8px;line-height:1.5} /* source */ input[type=file]{display:none} /* effect cards */ /* It is a control, so it says so on hover. Every switch on both pages was missing this — the label carries the click, and a label has no cursor of its own. */ .switch{position:relative;width:34px;height:19px;flex:0 0 auto;cursor:pointer} .switch .tk{cursor:pointer} .switch input{opacity:0;width:0;height:0;position:absolute} .switch .tk{position:absolute;inset:0;background:#2b3444;border-radius:20px;transition:.15s} .switch .tk:before{content:"";position:absolute;width:15px;height:15px;left:2px;top:2px;background:#8b97a8;border-radius:50%;transition:.15s} .switch input:checked + .tk{background:rgba(94,208,255,.35)} .switch input:checked + .tk:before{transform:translateX(15px);background:var(--accent)} .ctl{margin:9px 0} .ctl:first-child{margin-top:2px} .ctl .lab{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px} .ctl .lab span{font-size:12px;color:var(--muted)} .ctl .lab .u{color:var(--muted-2);font-style:normal;font-size:11px;font-family:var(--mono)} .ctl .lab b{font-size:11.5px;color:var(--accent);font-family:var(--mono);font-weight:600} .numin{width:58px;background:#10151d;border:1px solid var(--line);color:var(--accent);border-radius:6px; padding:2px 5px;font-family:var(--mono);font-size:11px;text-align:right;-moz-appearance:textfield} .numin:focus{outline:none;border-color:var(--accent)} .numin::-webkit-outer-spin-button,.numin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .numin:disabled{opacity:.5} .ctl input[type=range]{width:100%;accent-color:var(--accent);height:18px} .ctl .colorwrap{display:flex;align-items:center;gap:9px} .ctl input[type=color]{width:44px;height:26px;border:1px solid var(--line);background:transparent;border-radius:7px;padding:0;cursor:pointer;flex:0 0 auto} .ctl .colorwrap .sw{flex:1;height:10px;border-radius:5px;border:1px solid var(--line)} .hexin{background:#10151d;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:3px 7px; font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;width:82px;flex:0 0 auto} .hexin:focus{outline:none;border-color:var(--accent)} .colorwrap .hexin{flex:1;width:auto} .ctl .xy{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ctl select{padding:6px 9px} .ctl.bool .lab{margin-bottom:0} .btn.mini{width:auto;padding:3px 10px;font-size:11px} /* particles */ #pageSeg button{padding:5px 12px;font-size:12px} .modal .card.lg{width:min(680px,95vw)} .modal .field{margin-bottom:12px} .modal .field>label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px} .modal input[type=text],.modal input[type=password]{width:100%} .seg.inline{width:auto;display:inline-flex} textarea.code{width:100%;height:230px;background:#0c1017;border:1px solid var(--line);border-radius:8px;color:#dfe7f1;font-family:var(--mono);font-size:12px;padding:11px;resize:vertical;line-height:1.55;outline:none} textarea.code:focus{border-color:var(--accent)} .modal .hint code{background:#0c1017;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-family:var(--mono);font-size:11px;color:var(--accent)} .err{color:var(--bad);font-size:12px;font-family:var(--mono);min-height:16px;margin-top:8px;white-space:pre-wrap} .foot2{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)} /* ---- overflow menu (the single "⋯" in the header) ---- */ .menu-wrap{position:relative;display:inline-flex} .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:216px;background:var(--panel-2); border:1px solid var(--line);border-radius:10px;padding:5px;z-index:50;display:none; box-shadow:0 16px 40px rgba(0,0,0,.55)} .menu.show{display:block} .menu button{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:0;color:var(--ink); font-family:var(--sans);font-size:12.5px;text-align:left;padding:7px 9px;border-radius:7px;cursor:pointer} .menu button:hover{background:#232d3d} .menu button .k{margin-left:auto;color:var(--muted-2);font-family:var(--mono);font-size:10.5px} .menu .sep{height:1px;background:var(--line);margin:5px 7px} .menu .grp{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted-2);padding:7px 9px 3px;font-weight:700} /* ---- "?" inline help: one line, only when asked for ---- */ .qh{background:transparent;border:1px solid var(--line);color:var(--muted-2);width:16px;height:16px; border-radius:50%;font-size:10px;line-height:1;cursor:pointer;padding:0;flex:0 0 auto;font-family:var(--sans)} .qh:hover,.qh.on{color:var(--accent);border-color:var(--accent)} .qh-body{display:none;color:var(--muted-2);font-size:11.5px;line-height:1.55;margin:7px 0 2px; padding:8px 10px;background:#10151d;border:1px solid var(--line);border-radius:8px} .qh-body.show{display:block} .qh-body b{color:var(--muted)} /* ---- collapsible section (pattern settings, advanced particle rows) ---- */ .fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px; font-size:11.5px;color:var(--muted);padding:7px 0;-webkit-user-select:none;user-select:none} .fold>summary::-webkit-details-marker{display:none} .fold>summary:hover{color:var(--ink)} .fold>summary .car{transition:transform .15s;font-size:9px;color:var(--muted-2)} .fold[open]>summary .car{transform:rotate(90deg)} .fold>summary .ln{flex:1;height:1px;background:var(--line)} /* ---- effect gallery ---- */ .modal .card.gal{width:min(900px,95vw)} .gal-top{display:flex;gap:8px;align-items:center;padding:11px 16px 0;flex:0 0 auto} .gal-top input[type=text]{flex:1} .gal-count{flex:0 0 auto;font-size:11.5px;color:var(--muted-2);white-space:nowrap; font-variant-numeric:tabular-nums;padding-right:2px} .gal-tabs{display:flex;gap:5px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid var(--line);flex:0 0 auto} .gal-tabs::-webkit-scrollbar{height:0} .gal-tabs button{background:#10151d;border:1px solid var(--line);color:var(--muted);border-radius:20px; padding:5px 12px;font-size:11.5px;cursor:pointer;white-space:nowrap;font-family:var(--sans);flex:0 0 auto} .gal-tabs button:hover{color:var(--ink)} .gal-tabs button.active{background:var(--accent);border-color:var(--accent);color:#04222e;font-weight:700} .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px} .gal-grid .gcat{grid-column:1/-1;font-size:10px;text-transform:uppercase;letter-spacing:.7px; color:var(--muted-2);font-weight:700;margin:6px 0 -2px} .gtile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:0;cursor:pointer; overflow:hidden;text-align:left;font-family:var(--sans);display:flex;flex-direction:column} .gtile:hover{border-color:var(--accent)} .gtile .th{width:100%;aspect-ratio:4/3;display:block;background:#0b0e14;object-fit:cover} .gtile .th.ph{display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:10.5px} .gtile .nm{font-size:12px;color:var(--ink);font-weight:600;padding:7px 8px 8px;line-height:1.25} .gal-empty{grid-column:1/-1;color:var(--muted-2);font-size:12.5px;font-style:italic;padding:14px 2px} .gtile .nm .by{display:block;font-size:10.5px;font-weight:500;color:var(--muted-2);margin-top:3px} /* the particles preset picker opens the same kind of gallery */ .preset-btn{justify-content:space-between;padding:9px 11px;font-size:13px} .preset-btn .nm{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .preset-btn .go{color:var(--muted-2);font-size:11.5px;flex:0 0 auto;margin-left:10px} .preset-btn:hover .go{color:var(--accent)} .gtile{position:relative} .gtile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .gtile .del{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:6px;display:none; align-items:center;justify-content:center;background:rgba(8,11,16,.82);border:1px solid var(--line); color:var(--muted);font-size:10px;line-height:1;cursor:pointer;padding:0;font-family:var(--sans)} .gtile:hover .del{display:flex} .gtile .del:hover{color:var(--bad);border-color:var(--bad)} /* preview */ .prev-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:#0b0f16;flex:0 0 auto} .prev-bar .t{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.3px} .prev-bar .spacer{flex:1} .prev-bar .seg{width:auto} .prev-bar .seg button{flex:0 0 auto;padding:5px 10px;font-size:11.5px} .prev-bar .btn.mini{padding:5px 12px;font-size:11.5px} .canvas-host{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden; background: linear-gradient(45deg,#0b0e14 25%,transparent 25%), linear-gradient(-45deg,#0b0e14 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#0b0e14 75%), linear-gradient(-45deg,transparent 75%,#0b0e14 75%); background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;background-color:#0f141e} .canvas-host canvas{display:block;max-width:100%;max-height:100%;box-shadow:0 8px 40px rgba(0,0,0,.5)} .hud{position:absolute;top:10px;left:10px;display:flex;gap:8px;pointer-events:none} .hud .chip{background:rgba(6,9,14,.72);border:1px solid var(--line);border-radius:7px;padding:4px 9px; font-family:var(--mono);font-size:11px;color:var(--muted);backdrop-filter:blur(4px)} .hud .chip b{color:var(--accent);font-weight:600} .fatal{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:30px;text-align:center;background:rgba(7,9,13,.94);z-index:20} .fatal .box{max-width:440px} .fatal h3{color:var(--bad);margin:0 0 10px} .fatal p{color:var(--muted);line-height:1.6;font-size:13px} /* modal */ .modal{position:fixed;inset:0;background:rgba(4,6,10,.72);display:none;align-items:center;justify-content:center;z-index:40;padding:24px} .modal.show{display:flex} .modal .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;width:min(560px,94vw);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.5)} .modal .card .hd{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)} .modal .card .hd .logo{font-weight:700;display:flex;gap:9px;align-items:center;font-size:14px} .xbtn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; background:transparent;border:1px solid var(--line);border-radius:8px;color:var(--muted); font-size:12px;line-height:1;padding:0;cursor:pointer;font-family:var(--sans);transition:.13s} .xbtn:hover{color:var(--ink);border-color:var(--bad);background:rgba(255,107,107,.14)} .modal .card .bd{padding:16px;overflow:auto;color:var(--muted);line-height:1.7;font-size:13px} .modal .card .bd b{color:var(--ink)} .modal .card .bd kbd{background:#0c1017;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-family:var(--mono);font-size:11px;color:var(--accent)} .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0; background:var(--panel-2);border:1px solid var(--accent);color:var(--ink);padding:9px 16px;border-radius:9px;font-size:13px;transition:.25s;z-index:60;pointer-events:none} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* Below modals (40) and menus (50) — the badge must never cover a control. */ .credit{position:fixed;right:14px;bottom:var(--credit-bottom,14px);z-index:15;pointer-events:none;user-select:none; font-family:var(--sans);font-size:14px;letter-spacing:.02em;color:var(--ink); background:rgba(12,16,23,.72);border:1px solid var(--accent);border-radius:10px; padding:8px 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 6px 20px rgba(0,0,0,.45)} .credit b{color:var(--accent);font-weight:700} @media (max-width:840px){ main{flex-direction:column} .left{width:100%;max-width:none;min-width:0;height:54%;border-right:0;border-bottom:1px solid var(--line)} .right{height:46%} .splitter{display:none} /* stacked: there is no horizontal split to drag */ } /* A way into the marketplace that is not "click the last tag on the strip". Sits under each page's browse hero, quiet enough not to compete with it. */ .btn.market-in{margin-top:7px;font-size:11.5px;padding:6px 8px; color:var(--muted);background:transparent;border:1px dashed var(--line)} .btn.market-in:hover{color:var(--accent);border-color:var(--accent);border-style:solid}